異步JQUERY文件上傳

Question

我有帶有文件輸入類型的HTML表單。 我需要將表單異步提交到服務器。 服務器偵聽傳入的文件上載（多部分文件上載）請求。 是否有可能使用jquery來實現。

Answer 1

如果支持FormData和File API （均具有HTML5功能），則可以輕松使用jQuery的$.ajax()方法發送文件。

您也可以發送不帶FormData的文件，但是必須以兩種方式發送文件API來處理文件，以便可以使用XMLHttpRequest（Ajax）發送文件。

$.ajax({
  url: 'file/destination.html', 
  type: 'POST',
  data: new FormData($('#formWithFiles')[0]),  // The form with the file inputs.
  processData: false  // Using FormData, don't process data.
}).done(function(){
  console.log("Success: Files sent!");
}).fail(function(){
  console.log("An error occurred, the files couldn't be sent!");
});

有關快速的純JavaScript示例，請參見“ 使用FormData對象發送文件 ”。

如果您想為舊版瀏覽器添加一個后備版本，或者只想使用一個跨瀏覽器實現，請使用Bifröst 。 它增加了一個額外的jQuery Ajax傳輸，允許使用舊的$.ajax()發送文件 。

只需添加jquery.bifrost.js並發出請求：

$.ajax({
  url: 'file/destination.html', 
  type: 'POST',
  // Set the transport to use (iframe means to use Bifröst)
  // and the expected data type (json in this case).
  dataType: 'iframe json',                                
  fileInputs: $('input[type="file"]'),  // The file inputs containing the files to send.
  data: { msg: 'Some extra data you might need.'}
}).done(function(){
  console.log("Success: Files sent!");
}).fail(function(){
  console.log("An error occurred, the files couldn't be sent!");
});

祝好運！

Answer 2

是否有可能使用jquery來實現。

不，不是直接使用jQuery。

您可以使用HTML5文件API： https : //developer.mozilla.org/en-US/docs/Using_files_from_web_applications

或者，如果您需要支持舊版瀏覽器，則可以使用某些插件，例如Uploadify ， Fine Uploader或jQuery form plugin 。

Answer 3

我來看看這個jQuery插件：

http://malsup.com/jquery/form/#file-upload