jQuery 如何序列化jquery中的文件类型输入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/913562/
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 do I serialize file type input in jquery
提问by Geshan
Previously using Prototype I could serialize the input type file, it gave me the file name of the file being uploaded but when I serialized the form in jquery I just got the input type text and others not the file how do I do it?
以前使用 Prototype 我可以序列化输入类型文件，它给了我正在上传的文件的文件名但是当我在 jquery 中序列化表单时，我只得到输入类型文本而其他人不是文件我该怎么做？
回答by Sampson
After spending a few minutes in Firebug, there's actually several ways to go about this it seems. For instance, I was able to get a list of files from the fileObject itself:
在 Firebug 中花了几分钟之后，实际上似乎有几种方法可以解决这个问题。例如，我能够从 fileObject 本身获取文件列表：
var file = $("#control").attr("files")[0];
var fileName = file.fileName;
var fileSize = file.fileSize;
alert("Uploading: "+fileName+" @ "+fileSize+"bytes");
Clearly I can read the values for serializing. But writing is another issue.
显然，我可以读取序列化的值。但写作是另一个问题。
But apparently this isn't as easy as others claim. I took the liberty of downloading the Prototype source and couldn't find out where it's instructions were for using FileList data for the File Upload object.
但显然这并不像其他人声称的那么容易。我冒昧地下载了 Prototype 源代码，但找不到将 FileList 数据用于 File Upload 对象的说明在哪里。
In fact, I found a paper online that cataloged the issues with serializing the File Upload object itself, claiming that no AJAX Library did it well (note, this was written in 2007). This topic is interesting though, and it appears that you may be able to work up any number of methods to pull the data from the File Upload - the spec itself contains ample information to guide you down that path.
事实上，我在网上找到了一篇论文，其中对序列化 File Upload 对象本身的问题进行了编目，声称没有 AJAX 库做得很好（注意，这是在 2007 年编写的）。不过，这个主题很有趣，而且您似乎可以使用多种方法从文件上传中提取数据 - 规范本身包含足够的信息来指导您沿着这条路走下去。
I wish I had an answer as to how you can write, and add files to the File List, but at the moment I'm just as lost as you are (or were at the time of asking this question). With a bit more reading, this may prove to be much easier than I suspect - but at the moment I don't have the time to invest.
我希望我能回答您如何编写文件并将文件添加到文件列表中，但目前我和您一样迷茫（或者在问这个问题时）。多读一点，这可能比我想象的要容易得多——但目前我没有时间投资。
Best of luck.
祝你好运。
Relevant Documentation:
相关文档：
- FileUpload on W3C
- Form Serializationby Garrett Smith, 2007
- Prototype 1.6.1RC3 Source(Line 3967: Form.serializeElements begins)
- W3C上的文件上传
- Garrett Smith 的表单序列化，2007 年
- 原型 1.6.1RC3 源代码（第 3967 行：Form.serializeElements 开始）
回答by anewcomer
As someone else mentioned, you can submit a form containing file inputs via ajax, but it requires some hairy iframe magic. If you don't mind using jQuery, I highly suggest the jquery.formsplugin's ajaxSubmit function.
正如其他人提到的，您可以通过 ajax 提交包含文件输入的表单，但这需要一些复杂的 iframe 魔法。如果您不介意使用 jQuery，我强烈建议使用jquery.forms插件的 ajaxSubmit 函数。
回答by Adam Jimenez
Relevant jQuery bug: http://bugs.jquery.com/ticket/2656
相关的 jQuery 错误：http: //bugs.jquery.com/ticket/2656
I added my own serializeAll method instead of serialize:
我添加了自己的 serializeAll 方法而不是序列化：
(function($) {
$.fn.serializeAll = function() {
var rselectTextarea = /^(?:select|textarea)/i;
var rinput = /^(?:color|date|datetime|datetime-local|email|file|hidden|month|number|password|range|search|tel|text|time|url|week)$/i;
var rCRLF = /\r?\n/g;
var arr = this.map(function(){
return this.elements ? jQuery.makeArray( this.elements ) : this;
})
.filter(function(){
return this.name && !this.disabled &&
( this.checked || rselectTextarea.test( this.nodeName ) ||
rinput.test( this.type ) );
})
.map(function( i, elem ){
var val = jQuery( this ).val();
return val == null ?
null :
jQuery.isArray( val ) ?
jQuery.map( val, function( val, i ){
return { name: elem.name, value: val.replace( rCRLF, "\r\n" ) };
}) :
{ name: elem.name, value: val.replace( rCRLF, "\r\n" ) };
}).get();
return $.param(arr);
}
})(jQuery);
Then call:
然后调用：
$('#form').serializeAll()
回答by Adam Jimenez
This is a new feature in FireFox 3.
这是 FireFox 3 中的一项新功能。
Check out http://blog.igstan.ro/2009/01/pure-javascript-file-upload.html
查看http://blog.igstan.ro/2009/01/pure-javascript-file-upload.html
回答by burghard.britzke
At the Prototype source (referenced above) serializeElements distinguishes between "element.type != 'file'" and others. Element type "file" is not serialized.
在原型源（上面引用）中，serializeElements 区分“element.type != 'file'”和其他。元素类型“文件”未序列化。
