چگونه می توانم فایل ها را به صورت ناهمزمان با jQuery آپلود کنم؟

سوال

من می خواهم یک فایل را به صورت ناهمزمان با jQuery آپلود کنم.

$(document).ready(function () {
    $("#uploadbutton").click(function () {
        var filename = $("#file").val();

        $.ajax({
            type: "POST",
            url: "addFile.do",
            enctype: 'multipart/form-data',
            data: {
                file: filename
            },
            success: function () {
                alert("Data Uploaded: ");
            }
        });
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<span>File</span>
<input type="file" id="file" name="file" size="10"/>
<input id="uploadbutton" type="button" value="Upload"/>

به جای اینکه فایل آپلود شود، فقط نام فایل را دریافت می کنم. برای رفع این مشکل چه کاری می توانم انجام دهم؟

پاسخ

با HTML5 می توانید فایل ها را با Ajax و jQuery آپلود کنید. نه تنها این، شما می توانید اعتبار سنجی فایل (نام، اندازه، و نوع MIME) را انجام دهید یا با تگ پیشرفت HTML5 (یا یک div) رویداد پیشرفت را مدیریت کنید. اخیراً مجبور شدم یک آپلود کننده فایل بسازم، اما نمی‌ خواستم از Flash یا Iframes یا افزونه ‌ها استفاده کنم و پس از کمی تحقیق به راه‌ حل آن رسیدم.

فایل بسازم، اما نمی‌ خواستم از Flash یا Iframes یا افزونه ‌ها استفاده کنم و پس از کمی تحقیق به راه‌ حل آن رسیدم.
HTML:
<form enctype="multipart/form-data">
    <input name="file" type="file" />
    <input type="button" value="Upload" />
</form>
<progress></progress>

در ابتدا، در صورت تمایل می توانید اعتبار سنجی را انجام دهید. به عنوان مثال، در مورد .on(‘change’) فایل:

$(':file').on('change', function () {
  var file = this.files[0];

  if (file.size > 1024) {
    alert('max upload size is 1k');
  }

  // Also see .name, .type
});

اکنون ارسال $.ajax() را با کلیک دکمه ثبت کنید:

$(':button').on('click', function () {
  $.ajax({
    // Your server script to process the upload
    url: 'upload.php',
    type: 'POST',

    // Form data
    data: new FormData($('form')[0]),

    // Tell jQuery not to process data or worry about content-type
    // You *must* include these options!
    cache: false,
    contentType: false,
    processData: false,

    // Custom XMLHttpRequest
    xhr: function () {
      var myXhr = $.ajaxSettings.xhr();
      if (myXhr.upload) {
        // For handling the progress of the upload
        myXhr.upload.addEventListener('progress', function (e) {
          if (e.lengthComputable) {
            $('progress').attr({
              value: e.loaded,
              max: e.total,
            });
          }
        }, false);
      }
      return myXhr;
    }
  });
});

همانطور که می بینید، با HTML5 (و برخی تحقیقات) آپلود فایل نه تنها ممکن می شود، بلکه بسیار آسان است. آن را با Google Chrome امتحان کنید زیرا برخی از مؤلفه ‌های HTML5 نمونه‌ ها در هر مرورگر موجود نیست.

شما می توانید برای یادگیری زبان برنامه نویسی جاوا اسکریپت، از مسیر کارآموزی فرانت اند استفاده کنید.