jQuery 如何使用jquery发送文件输入？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3572993/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to send file input using jquery?
提问by armin etemadi
i have a form that contains 3 File inputs.i want to send it via jquery.i tried serialize function in jquery,but i realized that this function don't send file inputs!
我有一个包含 3 个文件输入的表单。我想通过 jquery 发送它。我尝试在 jquery 中序列化函数，但我意识到这个函数不发送文件输入！
here is my form :
这是我的表格：
<form id="submit_pics" action="#" >
file 1 : <input name="file1" id="file1" type="file" /><br />
file 2 : <input name="file2" id="file2" type="file" /><br />
file 3 : <input name="file3" id="file3" type="file" /><br />
<br />
<div>
<a id="submit" href="javascript:;" ><img src="uploads/images/button1.png" /></a>
</div>
</form>
and this is my javascript code :
这是我的 javascript 代码：
<script type="text/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;
});
});
回答by Joan
After some research I found that you can do it with:
经过一些研究，我发现您可以使用以下方法：
$.ajax({
url: 'track.php',
type: 'POST',
data: new FormData($("#submit_pics")[0]),
processData: false,
contentType: false
}).
I'm Java programmer (Liferay) and in the server I use this to get the File:
我是 Java 程序员（Liferay），在服务器中我用它来获取文件：
UploadPortletRequest uploadRequest = PortalUtil.getUploadPortletRequest(request);
File File1 = uploadRequest.getFile("file1");
File File2 = uploadRequest.getFile("file2");
I supose something similar exists in php.
我认为php中存在类似的东西。
回答by dmarucco
Unfortunately you can not upload files through XMLHttpRequest. AJAX doesn't actually post forms to the server, it sends selected data to in the form of a POST or GET request. Javascript is not capable of grabbing the file from the users machine and sending it to the server
不幸的是，您不能通过 XMLHttpRequest 上传文件。AJAX 实际上并不向服务器发送表单，它以 POST 或 GET 请求的形式将选定的数据发送到服务器。Javascript 无法从用户机器上抓取文件并将其发送到服务器
You can use a tricky workaround, posting (without AJAX) the request to an hidden iframe.
您可以使用一个棘手的解决方法，将请求发布（不使用 AJAX）到隐藏的 iframe。
Have a look at this TUTORIAL
看看这个教程
回答by Deniz Dogan
You should take a look at the JQuery Form Plugin. With that you can easily programmatically submit any form you have.
你应该看看JQuery Form Plugin。有了它，您可以轻松地以编程方式提交您拥有的任何表单。
回答by Reigel
You can't do it via $.ajax()but you can use this uploadify plugin.
你不能通过$.ajax()但你可以使用这个uploadify插件。
回答by Jorge Santos Neill
This code works for me
这段代码对我有用
_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);
}
});
}
