javascript如何異步上傳檔案

使用HTML5，您可以使用Ajax和jQuery進行檔案上傳。 不僅如此，您還可以使用HTML5進度标記（或div）執行檔案驗證（名稱，大小和MIME類型）或處理progress事件。

下面，俺給出了一個實作的方法：

HTML

<form enctype="multipart/form-data">
    <input name="file" type="file" />
    <input type="button" value="Upload" />
</form>
<progress></progress>           

複制

Javascript

我們可以通過檔案的change事件來做一些驗證

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

  if (file.size > 1024) {
    alert('上傳檔案最大為1k');//限制檔案上傳大小
  }

  
});           

複制

點選上傳按鈕觸發事件

$(':button').on('click', function () {
  $.ajax({
    // 伺服器處理腳本
    url: 'upload.php',
    type: 'POST',

    // 表單資料
    data: new FormData($('form')[0]),

    // 告訴jquery不需要處理data或擔心content-type
    // 必須包含以下屬性
    cache: false,
    contentType: false,
    processData: false,

    xhr: function () {
      var myXhr = $.ajaxSettings.xhr();
      if (myXhr.upload) {
        //用于處理上傳的進度
        myXhr.upload.addEventListener('progress', function (e) {
          if (e.lengthComputable) {
            $('progress').attr({
              value: e.loaded,
              max: e.total,
            });
          }
        }, false);
      }
      return myXhr;
    }
  });
});           

複制

正如您所看到的，使用HTML5（以及一些研究）檔案上傳不僅可以實作，而且非常簡單。 嘗試使用谷歌浏覽器，因為有些浏覽器可能不相容。

開源插件

俺給大家在推薦一個插件，uppy，這個插件支援以下功能：

• 不依賴于任何插件，支援拖放
• 不離開頁面進行檔案上傳
• 在浏覽器崩潰的情況下恢複上傳