0

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

4

3 回答 3

2

如果支持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 传输，允许使用 plane old发送文件$.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!");
});

祝你好运！

于 2014-08-02T22:36:34.883 回答
1

是否可以使用 jquery 来实现这一点。

不，不是直接使用 jQuery。

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

或者，如果您需要支持旧版浏览器，您可以使用一些插件，例如Uploadify,Fine Uploader或jQuery form plugin.

于 2013-02-11T09:50:24.790 回答
0

我会看看这个 jQuery 插件：

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

于 2013-02-11T09:51:00.307 回答