آموزش آپلود فایل با Ajax در MVC 5

در این پست می خواهیم به صورت کامل نحوه آپلود فایل با استفاده از Aajx در Asp.Net MVC 5 را آموزش می دهیم.

در صورتی که با نحوه ارسال اطلاعات به صورت Ajax با استفاده Jquery آشنا نیستید این آموزش را مشاهده کنید.

برای شروع یک اکشن متد به نام UploadAjax به صورت زیر بنوسید

public ActionResult UploadAjax()
{
    var result = new string[2];

    HttpPostedFileBase file = Request.Files["filename"];

    var fileName = Path.GetFileName(file.FileName);

    var strFileExtension = Path.GetExtension(fileName).ToUpper();

    if (((strFileExtension != ".JPG") &&
         (strFileExtension != ".JPEG") &&
         (strFileExtension != ".JPE")) &&
        (strFileExtension != ".GIF") &&
        (strFileExtension != ".PNG"))
    {
        result[1] = "پسوند مجاز برای آپلود عکس jpeg و png و gif میباشد!";
        return Json(result);
    }

    string strContentType = file.ContentType.ToUpper();

    if ((strContentType != "IMAGE/JPEG") && // Firefox!
        (strContentType != "IMAGE/PJPEG") && // Internet Explorer!
        (strContentType != "IMAGE/GIF") &&
        (strContentType != "IMAGE/PNG"))
    {
        result[1] = "پسوند فایل تغییر داده شده است!";
        return Json(result);
    }

    if (file.ContentLength == 0)
    {
        result[1] = "در حال حاضر امکان آپلود فایل وجو ندارد!";
        return Json(result);
    }

    if (file.ContentLength > 150 * 1024)
    {
        result[1] = "حداکثر حجم مجاز برای آپلود 150 کیلوبایت میباشد";
        return Json(result);
    }

    System.Drawing.Image oImage = System.Drawing.Image.FromStream(file.InputStream);

    if ((oImage.Width > 200) || (oImage.Height > 200))
    {
        result[1] = " دقت داشته باشید حتما عکس ها در اندازه 200 در 200 پیکسل باشد (طول=200 و عرض=200)!";
        return Json(result);
    }

    var strRootRelativePath = "~/Images/";

    if (System.IO.File.Exists(Server.MapPath(strRootRelativePath) + Path.GetFileName(file.FileName)))
    {

    }

    string newFilename = Guid.NewGuid().ToString().Replace("-", string.Empty) + Path.GetExtension(fileName);

    newFilename = "/Images/" + newFilename;
    var physicalPath = Server.MapPath(newFilename);
    file.SaveAs(physicalPath);

    result[0] = "true";
    result[1] = newFilename;
    return Json(result);
}

کار این اکشن متد به این صورت است که یک فایل را دریافت کرده که فایل مد نظر ما یک تصویر است و شما می توانید هر فایلی را آپلود کنید.

در اکشن متد UploadAjax فرت عکس ، ماهیت عکس ، بررسی امکان آپلود ، حجم عکس و اندازه عکس را مورد بررسی قرار دادیم تا در صورت وجود خطا به صورت json خطا را ارسال می کنیم و در غیر این صورت نام عکس و به true را به صورت یک آرایه ارسال می کنیم.

نکته:

ما نام عکس را با تولید یک Guid عوض می کنیم.

کدهای Html

<span class="btn btn-upload btn-file">
   انتخاب
   <input id="ImageUrl" type="file">
</span>
<div class="text-center" id="progress">
</div>

در کدها بالا یک تگ input از نوع فایل قرار دادیم و یک دیو که هنگام آپلود یک تصویر لود نمایش داده شود.

کدهای jquery

<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        $("#ImageUrl").on('change', function () {

            var serviceUrl = '/Home/UploadAjax';
            var file = document.getElementById("ImageUrl").files[0];
            var formData = new FormData();


            formData.append("filename", file); //آرگومان اول اسمیست که معرف فایل است و به عنوان آرگومان ورودی تابع در سمت سرور استفاده میشود

            $("#progress").html("<img id='upload_loading' src='/Images/loadingAnimation.gif' /><br><h3>درحال آپلود فایل</h3>");

            $.ajax({
                type: "POST",
                url: serviceUrl,
                data: formData /*JSON.stringify({ filename: $("#file").val() })*/, /*این چیزی که کامنت شده برای ارسال مقدار استرینگ به تابع استفاده میشود ولی ما اینجا یک فایل میخواهیم بفرستیم پس باید از فرمدیتا به شکلی که میبینیم استفاده کنیم*/
                contentType: false,
                processData: false,
                dataType: "json",
                success: successFunc,
                error: errorFunc,
                complete: completeFunc
            });

            function successFunc(data) {

                if (data[0] == "true") {
                    alert('فایل با موفقیت آپلود شد' + data[1]);
                } else {
                    console.log(data[1]);
                    alert(data[1]);
                }

            }

            function errorFunc(jqXHR, textStatus, errorThrown) {
                alert("خطا در آپلود فایل");
            }

            function completeFunc() {
                $('#progress').remove();
            }

        });
    });
</script>

در کدهای جی کوئری بالا زمانی که تصویری انتخاب می شود شروع به آپلود تصویر می کند.

آرگومان اول اسمیست که معرف فایل است و به عنوان آرگومان ورودی تابع در سمت سرور استفاده میشود.

formData.append("filename", file);

چیزی که کامنت شده برای ارسال مقدار استرینگ به تابع استفاده میشود ولی ما اینجا یک فایل میخواهیم بفرستیم پس باید از فرمدیتا به شکلی که میبینیم استفاده کنیم.

data: formData /*JSON.stringify({ filename: $("#file").val() })*/, /*این چیزی که کامنت شده برای ارسال مقدار استرینگ به تابع استفاده میشود ولی ما اینجا یک فایل میخواهیم بفرستیم پس باید از فرمدیتا به شکلی که میبینیم استفاده کنیم*/