代码之家 › 专栏 › 技术社区 › Zenon

jquery ajax文件上传跨浏览器支持

cross-browser file-upload iframe ajax jquery

Zenon · 技术社区 · 14 年前

我目前正在开发一个Ajax文件上传脚本,它在火狐中很有魅力,但在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();
}

并且finishedPostingFile()将是iframe完成发布/加载后的回调函数。

现在,这在Firefox中很有魅力,但在IE中不起作用。我已经发现IE需要 attr('encoding',...) 而不是 attr('enctype',...) 我也尝试了在不创建表单和iframe的情况下,将这些元素作为纯HTML编写,这并没有真正起到什么作用。

IE(IE8,具体来说,还没有在<8中测试过)没有给出错误,加载动画一直在旋转,没有上传文件… 有人知道怎么做吗?

6 回复 | 直到 11 年前

Luca Matteis 14 年前

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

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

ASR 12 年前

我在第10行做了这个改变:

它起作用了

 if(window.ActiveXObject) {
                var io;


                try
                {
                   //Your JavaScript code will be here, routine JavaScript statements area.
                   io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />');
                }
                catch(err)
                {
                   //JavaScript Errors handling code will be here
                   io=document.createElement("iframe");
                    io.setAttribute("id",frameId);
                    io.setAttribute("name",frameId);
                }

marc.d 14 年前

下面是一个firefox/ie7/ie8的工作示例,我目前正在为progressbar使用jqueryui对话框。

只需将“documentuploadForm”替换为表单的ID

$(document).ready(function() {
    $("#DocumentUploadForm").submit(function(data) {
        data.preventDefault;

        var submittingForm = $("#DocumentUploadForm");
        var frameName = ("Upload");
        var uploadFrame = $("<iframe name=\"" + frameName + "\" />");

        uploadFrame.css("display", "none");


        $(".document_upload_progress").dialog({
            autoOpen: true,
            bgiframe: true,
            resizable: false,
            height: 150,
            width: 350,
            modal: true,
            overlay: {
                backgroundColor: '#000',
                opacity: 0.5
            },
            open: function() {
                $(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar-close").remove();
            },
            close: function() {
                $(".document_upload_progress").dialog("destroy");
            }
        });


        uploadFrame.load(function(data) {
            //submit complete
            setTimeout(function() { uploadFrame.remove(); }, 100);
            $('#document_upload_dialog').dialog('close');
        });

        $("body:first").append(uploadFrame);

        //setup complete
        submittingForm.attr("target", frameName);
    });
});

高温高压

Tahir Akhtar 14 年前

我想你的框架在IE中永远不会被附加到DOM中。至少如果您发布的HTML是完整的。因为它不包含id=fileuploadDiv的任何div

您可以通过添加宽度和高度非零的iframe来确认这一点,并将src设置为正确的URL。

Torben 12 年前

谢谢大家。

我现在使用的脚本来自 http://www.uploadify.com .

很棒的脚本,有很多可定制的函数…

Frank Adrian 11 年前

我做了一件非常相似的事情,我遇到了一个问题,就是IE8没有将文件上传到我的服务器上;出现了一个inisizerror。

我的解决方案是添加此行:

form.encoding = "multipart/form-data";

创建时的窗体。 enctype属性也是必需的。