如何使用jQuery序列化file upload

所以我有一个表单，我使用jQuery序列化函数通过ajax提交表单

serialized = $(Forms).serialize(); $.ajax({ type : "POST", cache : false, url : "blah", data : serialized, success: function(data) { } 

但如果表单有一个<input type="file">字段…如何使用此ajax序列化方法将文件传递到窗体…打印$ _FILES不会输出任何内容

Answer 1

无法使用AJAX上传文件，因为您无法访问存储在客户端计算机上的文件的内容，并使用JavaScript在请求中发送它。 实现这一点的技术之一是使用隐藏的iframe。 有一个很好的jQuery表单插件 ，它允许你AJAX化你的表单，它也支持file upload 。 所以使用这个插件，你的代码将看起来像这样：

 $(function() { $('#ifoftheform').ajaxForm(function(result) { alert('the form was successfully processed'); }); }); 

该插件会自动处理订阅表单的submit事件，取消默认提交，序列化值，使用适当的方法和处理file upload字段，…

Answer 2

您现在可以使用Ajax上传文件！

例子：

https://stackoverflow.com/a/8758614/1072492

http://net.tutsplus.com/tutorials/javascript-ajax/uploading-files-with-ajax/

Answer 3

它适用于任何forms的表单

 $(document).on("submit", "form", function(event) { event.preventDefault(); var url=$(this).attr("action"); $.ajax({ url: url, type: $(this).attr("method"), dataType: "JSON", data: new FormData(this), processData: false, contentType: false, success: function (data, status) { }, error: function (xhr, desc, err) { } }); }); 

Answer 4

您可以通过使用FormData方法通过AJAX上传文件。 尽pipeIE7,8和9不支持FormDatafunction。

 $.ajax({ url: "ajax.php", type: "POST", data: new FormData('form'), contentType: false, cache: false, processData:false, success: function(data) { $("#response").html(data); } }); 

Answer 5

HTML5引入了FormData类，可以用来用ajax上传文件。

FormData支持从以下桌面浏览器版本开始。 IE 10+，Firefox 4.0+，Chrome 7+，Safari 5+，Opera 12+

https://developer.mozilla.org/en/docs/Web/API/FormData/FormData