問題

我想用jQuery非同步上傳檔案.這是我的HTML:

 <span>File</span>
<input type="file" id="file" name="file" size="10"/>
<input id="uploadbutton" type="button" value="Upload"/>
 

這裡我的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: ");
            }
        });
    });
});
 

我只獲得檔名.我可以做些什麼來解決這個問題?

目前的解決方案

我正在使用 jQuery Form Plugin 上傳檔案.

  最佳答案

使用 HTML5 您可以使用Ajax和jQuery進行檔案上傳.不僅如此,您可以進行檔案驗證(名稱,大小和MIME型別)或使用HTML5進度標記(或div)處理進度事件.最近我不得不進行檔案上傳,但我不想使用 Flash 也沒有框架或外掛,經過一些研究,我提出瞭解決方案.

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元件.

  相同標籤的其他問題

javascriptjqueryajaxasynchronousxmlhttprequest