如何在jquery中序列化文件类型输入

时间:2009-05-27 01:35:31

标签: jquery serialization forms

以前使用Prototype我可以序列化输入类型文件,它给了我正在上传的文件的文件名但是当我在jquery中序列化表单时我只得到了输入类型的文本而其他的不是文件我该怎么做?

5 个答案:

答案 0 :(得分:11)

在Firebug中花了几分钟之后,实际上有几种方法可以解决这个问题。例如,我能够从fileObject本身获取文件列表:

var file = $("#control").attr("files")[0];
var fileName = file.fileName;
var fileSize = file.fileSize;

alert("Uploading: "+fileName+" @ "+fileSize+"bytes");

显然,我可以阅读序列化的值。但写作是另一个问题。

但显然这并不像其他人声称的那么容易。我冒昧地下载了Prototype源代码,无法找到将FileList数据用于File Upload对象的说明。

事实上,我在网上发现了一篇论文,其中列出了序列化文件上传对象本身的问题,声称没有AJAX库做得好(注意,这是在2007年写的)。这个主题很有意思,看起来您可以使用任意数量的方法从文件上传中提取数据 - 规范本身包含足够的信息来指导您沿着这条路走。

我希望我能够回答你如何编写,并将文件添加到文件列表中,但此刻我就像你一样迷失(或者在提出这个问题的时候)。有了更多的阅读,这可能比我怀疑要容易得多 - 但目前我没有时间投资。

祝你好运。

相关文件:

  1. FileUpload on W3C
  2. Form Serialization作者:Garrett Smith,2007
  3. Prototype 1.6.1RC3 Source(第3967行:Form.serializeElements开始)

答案 1 :(得分:4)

正如其他人提到的,你可以通过ajax提交一个包含文件输入的表单,但它需要一些毛茸茸的iframe魔法。如果您不介意使用jQuery,我强烈建议使用jquery.forms插件的ajaxSubmit函数。

答案 2 :(得分:3)

这是FireFox 3中的新功能。

查看http://blog.igstan.ro/2009/01/pure-javascript-file-upload.html

答案 3 :(得分:3)

相关的jQuery错误: http://bugs.jquery.com/ticket/2656

我添加了自己的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);

然后致电:

$('#form').serializeAll()

答案 4 :(得分:1)

在Prototype源代码(上面引用)中,serializeElements区分“element.type!='file'”和其他。元素类型“文件”未序列化。

相关问题