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

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


آموزش آپلود فایل با 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() })*/, /*این چیزی که کامنت شده برای ارسال مقدار استرینگ به تابع استفاده میشود ولی ما اینجا یک فایل میخواهیم بفرستیم پس باید از فرمدیتا به شکلی که میبینیم استفاده کنیم*/

 

دانلود

نویسنده حسین فتحی
گروه مطلب MVC
نوع مطلب فیلم آموزشی
تاریخ انتشار ۹ آبان ۱۳۹۴
منبع ایران گنج
تعداد نظرات ۳
قیمت کاربران VIP
توضیح توجه:
  • زمانی که روی لینک دانلود کلیک می کنید لینک دانلود به مدت 24 ساعت معتبر خواهد بود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.
خرید VIP
امکان خرید از درگاه های بانکی و حساب مجازی

برای دانلود بعد از خرید به همین صفحه برگردید تا لینک های دانلود نمایش داده شود

نظر / سوال

Captcha
نظرات کاربران

  • حسین

    این آموزش توی محیط برنامه نویسی خوب کار میکنه ولی توی سایت خطا میده میشه بگید چیکار کنم؟

    پاسخ
    • مدیر

      سلام

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

      پاسخ
      • حسین

        خیلی ممنون مشکلم حل شد

        پاسخ