异步 JQUERY 文件上传

Posted 2023-02-25

技术标签:

【中文标题】异步 JQUERY 文件上传【英文标题】：Asynchronous JQUERY File Upload 【发布时间】：2013-02-11 09:49:16 【问题描述】：

我有一个文件输入类型的 html 表单。我需要将表单异步提交到服务器。服务器侦听传入的文件上传（多部分文件上传）请求。是否可以使用 jquery 来实现这一点。

【问题讨论】：

How can I upload files asynchronously with jQuery? 的可能重复项 【参考方案1】：

如果支持FormData 和File API（两种HTML5 功能），您可以轻松使用jQuery 的$.ajax() 方法发送文件。

您也可以发送文件without 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 示例，请参阅“Sending files using a FormData object”。

如果您想为旧版浏览器添加一个回退，或者如果您只想要一个跨浏览器实现，请使用Bifröst。它增加了一个额外的jQuery Ajax transport 允许发送文件与飞机旧$.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!");
);

祝你好运！

【讨论】：

【参考方案2】：