13

我正在编写一个小的 JavaScript 应用程序，它允许我异步上传图像。

这个脚本在每个浏览器中都非常棒，除了，猜猜是谁，Internet Explorer ......

所以我做的第一件事是使用 AjaxForm Plugin for jQuery 为 IE9 版本创建一个后备，效果很好！

这是JS脚本。

$("#Uploader").change(function(e){
        var form = $("#UploaderForm");
        form.trigger('submit');
        $(this).attr('disabled','disabled');
        e.preventDefault();
});
$("#UploaderForm").submit(function(e){
        e.preventDefault();
        e.stopPropagation();
        var type="POST";var loading=$("#PhotoIsLoading");
        if(windowApi === true){
            var formData = new FormData($(this)[0]);
            $.ajax({
                url: url,
                type: type,
                xhr: function() {
                    myXhr = $.ajaxSettings.xhr();
                    if(myXhr.upload){ myXhr.upload.addEventListener('progress',progressHandlingFunction, false);}
                    return myXhr;
                },
                beforeSend: function(){loading.removeClass('isHidden_important');},
                success: function(response){
                    jres = JSON.parse(response);
                    alert("Test ok, file uploaded");
                },
                error: function(response){console.warn(response);},
                data: formData, 
                cache: false,
                contentType: false,
                processData: false
            });
            e.preventDefault();
        }else{
            $(this).ajaxSubmit({
                url: url,
                dataType: 'json',
                type: type,
                beforeSubmit: function(){loading.removeClass('isHidden_important');$(this).formSerialize();},
                success:function(response){
                    jres = JSON.parse(response);
                    alert("FallbackTest Complete");
                },
                error: function(response){console.warn(response);},
            });
            e.preventDefault();
            return false;
        }
    });

WindowApi并且所有其他变量都在全局脚本中定义，但不用担心，它们可以工作。准确地说，WindowApi是这样的：

var windowApi=true;
if(window.File&&window.FileReader&&window.FileList&&window.Blob){
console.log("window.api ready");windowApi=true;}
else{console.log("window.api not ready");windowApi=false;};

所以，通过这几行代码，我可以处理所有浏览器和 IE9 浏览器......

现在的问题在于 IE10，因为它拥有所有window.*方法并且可以使用该FormData对象。但是，当我尝试使用 IE10 和 FormData 上传内容时，我收到 formData 对象的“拒绝访问”错误。

此过程中涉及的 HTML 是：

<form name="UploaderForm" id="UploaderForm" method="post" enctype="multipart/form-data">
    <input type="file" name="Uploader" id="Uploader" accept="image/*" tabindex="1" />
</form>

所以最后我的问题是：

尝试访问 FormData 对象时，如何避免在 IE10 中出现“拒绝访问”异常？

4

2 回答 2

7

https://stackoverflow.com/a/13657047/641293和https://stackoverflow.com/a/4335390/641293可能有用。IE 对您可以以<input type='file'>编程方式执行的操作非常严格。

基于第一个，将第一行更改为此修复问题吗？

$("#Uploader").on('click', function(e){ /* rest of the function unchanged... */
于 2013-03-15T06:53:23.640 回答
1

当您提交包含被 javascript 弄乱的字段的表单时，您会收到拒绝访问。您在上传字段上动态添加了disabled属性，这可能是您收到Access denied. 也许您应该在不禁用活动场地的情况下change试一试？

顺便说一句，您最好FormData结合以下内容检查可用性File API：

var formDataSupport = false;
if (typeof FormData === 'function' && 
    window.File && 
    window.FileReader && 
    window.FileList && 
    window.Blob)
{
  console.log("File API available, formData available");  
  formDataSupport = true; 
}
于 2013-03-15T07:37:18.290 回答