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

Posted 2023-03-06

技术标签:

【中文标题】jQuery AJAX 文件上传跨浏览器支持【英文标题】：jQuery AJAX Fileupload crossbrowser support 【发布时间】：2011-01-07 16:22:15 【问题描述】：

我目前正在开发一个 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，具体来说，没有在

【问题讨论】：

你有没有得到一个很好的答案？ 【参考方案1】：

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

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

【讨论】：

该脚本似乎不允许您使用常规 <input type="file"> 结合单独的按钮来实际发送数据，相反它似乎只允许使用 input 发送数据即时创建，这不是我想要的。如果用户停用了 javascript，主要是出于兼容性原因。但我会检查来源，看看他们是如何做到的，也许你会引导我走向正确的方向:) 到目前为止，与这几天让我发疯的错误插件相比，这要好得多 - 隐形盒子被创建得不合适上面的链接好像失效了。我认为这是正确的：github.com/Valums-File-Uploader/file-uploader【参考方案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);

【讨论】：

【参考方案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);
    );
);

第

【讨论】：

我需要一个单独的表单来提交文件，在第一个表单中输入原始文件，以及其他所有内容，再加上另一个用于 ajax 上传内容的表单。我尝试使用您随该表单提供的整个 .submit(.....) 函数，但它在 IE8 中仍然不起作用。【参考方案4】：

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

的 div

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

【讨论】：

感谢您指出这一点，我对其进行了调整以合并 div。在过去 3 小时尝试了不同的东西后，我不知何故忘记了这一切。您还将 iframe 附加到表单中。感觉这不是正确的做法。尝试将 iframe 直接附加到我将表单附加到表单外的 div 中，但我会尝试使用 body【参考方案5】：

谢谢大家。

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

具有许多可自定义功能的出色脚本...

【讨论】：