元素的 FormData 不起作用 - Internet Explorer 10答案

【问题标题】：FormData of element not working - Internet Explorer 10元素的 FormData 不起作用 - Internet Explorer 10
【发布时间】：2013-09-13 11:17:30
【问题描述】：

我正在使用 jQuery.ajax 上传文件，并且在现代浏览器（如 Google Chrome、Mozilla Firefox、Opera 除外）中一切正常，除了 Internet Explorer 10。

new FormData($('.uploadForm')[0]) 在 IE10 中不起作用，但如果我只尝试使用这段代码：new FormData($('.uploadForm')) 它可以工作...看起来它不接受特定索引处的元素或其他什么？我真的不明白这个很好，这就是我寻求帮助的原因。

对于这个 IE10 示例，是否存在任何解决方法？

JS：

var form = new FormData($('.uploadForm')[0]);
config.progressBar.progressWidth = 0;
$('.uploadForm .valueBox').fadeOut('slow',function(){
    $(this).addClass('hidden')
    $('.meter').removeClass('hidden').width(config.progressBar.width);
    $.ajax({
        url: '../../uploads/some.php',
        type: 'POST',
        xhr: function() {
            var myXhr = $.ajaxSettings.xhr();
            if(myXhr.upload){
                myXhr.upload.onprogress = progress;
            }
            return myXhr;
        },
        success: function (res) {
            console.log(res)
        },
        data: form,
        cache: false,
        contentType: false,
        processData: false
    });

平安some.php代码：

foreach($_FILES["file"]["error"] as $key => $value) {
    if ($value == UPLOAD_ERR_OK){

        $name = $_FILES["file"]["name"][$key];

        $arr_files = getimagesize($_FILES["file"]["tmp_name"][$key]); 
        $width = $arr_files[0];
        $height = $arr_files[1];
        $mime = $arr_files['mime'];

        copy($_FILES['file']['tmp_name'][$key], '../uploads/upload/'.$name);

        echo json_encode($_FILES);
    }
}

抛出 IE10 错误：SCRIPT5: Access is denied.

【问题讨论】：

您的代码可以在 IE9 及更早版本中运行吗？
否，因为据我所知 IE9 及更早版本根本不支持 FormData...：/
它在其他“真正的”浏览器中是否有效？
你的意思是 Chrome 等？那么是的，它工作得很好。
好吧，一个可能的原因是，如果结果数组只包含一项，则IE10将类型Array更改为String类型。

标签： javascript php jquery internet-explorer form-data

【解决方案1】：

不要将文件传递给构造函数，而是使用append，例如：

var formData = new FormData();
formData.append('file', $('input[type=file]')[0].files[0]);

【讨论】：

将 HTMLFormElement 传递给构造函数是完全有效的。您是否知道这种做法的某些问题可能会导致 OP 的问题？
这在 IE10 中现在可以正常工作，但是@Ray，你在说什么类型的问题？
好的，我刚刚注意到，除了我上传的文件实际上没有上传之外，一切正常。它不断返回总大小和加载大小，但“上传”完成后，服务器上没有文件。我不知道为什么，因为当我使用旧代码时（new FormData($('.uploadForm')[0])) 它可以正常工作（ie10 除外）

【解决方案2】：

这个功能很好用，有需要的可以试试，

这里没有给出action url代码，只是php文件上传功能，但只返回-1,0,1,2用于识别错误和成功

function submitForm(){
    $('.uploading').show();
    var formObj = $('#multiform');
    var formURL = formObj.attr("action");
    if(window.FormData !== undefined)  // for HTML5 browsers
    {

        var formData = new FormData(formObj[0]);
        $.ajax({
            url: formURL,
            type: 'POST',
            data:  formData,`enter code here`
            mimeType:"multipart/form-data",
            contentType:  false,
            cache: false,
            processData:false,
            success: function(data, status){

               $('.uploading').hide();
               if(data==1){
                $('.uploadSuccessReport').show();
                $(".uploadSuccessReport").html('Successfully uploaded');
                setTimeout(function() { $('.uploadSuccessReport').hide('slow'); }, 2000);
              }else if(data==0){
                $('.uploadErrorReport').show();
                $(".uploadErrorReport").html('Something Error Happen');
               setTimeout(function() { $('.uploadErrorReport').hide('slow'); }, 2000);
              }else if(data==-1){
                $('.uploadErrorReport').show();
                $(".uploadErrorReport").html('Already exists, Please chose another one or Rename');
                setTimeout(function() { $('.uploadErrorReport').hide('slow'); }, 2000);
              } else if(data==2){
                $('.uploadErrorReport').show();
                $(".uploadErrorReport").html('Invalid File, Please Check file Format');
                setTimeout(function() { $('.uploadErrorReport').hide('slow'); }, 2000);
              } 
          },
      });
    }
} 


<form name="imageUpload" action="ajaxupload.php" method="post" id="multiform" enctype="multipart/form-data">
<span class="btn btn-file uploadSpan">Upload <span class="uploading" style="display:none;"><img src="assets/ajax-loader.gif" width="15%"></span>
<input type="file" name="file" id="disabledInput" class="btn-file uploadImage" onchange="submitForm()" />
</span>
</form>

【讨论】：