如何使用jquery发送文件输入？

我有一个包含3个文件inputs.i的表单想通过jquery.i尝试序列化函数在jquery中发送它，但我意识到这个函数不发送文件输入！

这是我的表格：

 file 1 : 
 file 2 : 
 file 3 : 
 
 
  
  

这是我的javascript代码：

  $(document).ready(function(){ $("#level3").click(function(event) { var str = $("#submit_pics").serialize(); $.ajax({ type: "POST", url: "track.php", data: str, success: function(theResponse) { $('#req_result').html(theResponse); } return false; }); }); 

Answer 1

遗憾的是，您无法通过XMLHttpRequest上传文件。 AJAX实际上并不将表单发布到服务器，它以POST或GET请求的forms发送选定的数据。 Javascript无法从用户计算机获取文件并将其发送到服务器

您可以使用棘手的解决方法，将请求（不使用AJAX）发布到隐藏的iframe。

看看这个教程

Answer 2

经过一些研究，我发现你可以用：

 $.ajax({ url: 'track.php', type: 'POST', data: new FormData($("#submit_pics")[0]), processData: false, contentType: false }). 

我是Java程序员（Liferay），在服务器中我使用它来获取文件：

 UploadPortletRequest uploadRequest = PortalUtil.getUploadPortletRequest(request); File File1 = uploadRequest.getFile("file1"); File File2 = uploadRequest.getFile("file2"); 

我在php中存在类似的东西。

Answer 3

你应该看一下JQuery Form Plugin 。 有了它，您可以轻松地以编程方式提交您拥有的任何表单。

Answer 4

你不能通过$.ajax()来做，但你可以使用这个uploadify插件 。

Answer 5

这段代码适合我

  _private.saveFile=function(){ var formElement = $("#formId")[0]; var _params = new FormData(formElement), _url = $(formElement).attr("action"); _private.postFile(_url,_params,function(data,error){ console.log(data); console.log(error); }); } _private.postFile=function(_urlService,_parameters,callback){ var _url= _public.getPath()+_urlService; _private.httpPostFile(_url,callback,_parameters); }; _private.httpPostFile=function(_url,callback,_data){ $.ajax({ url: _url, type: 'POST', data: _data, mimeType: "multipart/form-data", contentType: false, cache: false, processData: false, success: function (data, textStatus, jqXHR) { callback(data,null); }, error: function(xhr, status, error) { console.log('error ',error); console.log('status ',status); console.log('xhr ',xhr); callback(null,error); } }); }