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，具体而言，尚未在＆lt; 8中测试过）没有出错，加载动画只是继续旋转，没有文件被上传...... 任何人都知道如何使这项工作？

Answer 1

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

或者至少查看他们的代码，看看创建一个可以跨浏览器工作的表单的正确方法。

Answer 2

我在第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);
                }

Answer 3

这是Firefox / IE7 / IE8的一个工作示例，我目前正在为进度条使用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);
    });
});

HTH

Answer 4

我猜你的框架永远不会被附加到IE中的DOM。至少如果您发布的HTML已完成。因为它不包含id = fileUploadDiv

的任何div

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

Answer 5

感谢大家。

我现在使用http://www.uploadify.com中的脚本。

具有大量可自定义功能的优秀脚本......

Answer 6

我正在做一个非常类似的事情，我遇到的问题是IE8没有将文件上传到我的服务器;得到了一个IniSizeError。

我的解决方案是添加这一行：

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

创建时

到我的表单。还需要Enctype属性。

jQuery AJAX文件上传跨浏览器支持

6 个答案: