jQuery AJAX Fileupload交叉浏览器支持

Question

我目前正在开发一个AJAX文件上传脚本,它在Firefox中像魅力一样,但在IE中不起作用.

这是我正在使用的基本HTML:

<form >
    <input type="file" name="FileFields" id="FileFields"/>
    <button type="button" onclick="uploadFile();" id="uploadButton">Upload</button>
    <ul id="files"/>
    ... other form elements ...
</form>

<div id="fileUploadDiv"/>

这是uploadFile函数:

function uploadFile()
{
    //we don't want more then 5 files uploaded
    if($('#files li').size() >= 5)
    {
        return;
    }
    //disable the upload button
    $('#uploadButton').attr('disabled','disabled');
    //show loading animation
    $('#files').append(
        $('<li>')
            .attr('id','loading')
            .append(
                $('<img>').attr('src','/images/loading.gif')
            )
            .addClass('loading')
    );

    //add all neccessary elements (the form and the iframe)
    $('#fileUploadDiv').append(
        $('<form action="/uploadFile" method="post" id="fileUploadForm">')
            .attr('enctype','multipart/form-data')
            .attr('encoding', 'multipart/form-data')
            .attr('target', 'upload_frame')
            .append(
                $('#FileFields').clone()
                    .css('visibility','hidden')
        )
        .append(
            $('<iframe>').attr('name','upload_frame')
                .load(function(){finishedPostingFile();})
                .attr('id','upload_frame')
                .attr('src','')
                .css({
                    'width':'0px',
                    'height':'0px',
                    'border':'0px none #fff'
                })

        )
    );


    //start uploading the file
    $('#fileUploadForm').submit();
}

iframe完成发布/加载后,finishedPostingFile()将成为回调函数.

现在,这就像Firefox中的魅力,但在IE中不起作用.我已经发现IE需要attr('encoding',...)代替,attr('enctype',...)而且我也尝试了它,而不是通过将这些元素写成普通的html来创建表单和iframe,这并没有真正有所作为.

IE(IE8,具体而言,尚未在<8中测试过)没有出错,加载动画只是继续旋转,没有文件被上传......任何人都知道如何制作这个工作？

Answer 1

为什么不使用这个，http://valums.com/ajax-upload/？

或者至少看看他们的代码，看看创建跨浏览器的表单的正确方法。