IE10 使用 display:none 文件输入通过 ajax 发送 FormData 对象答案

【问题标题】：IE10 send FormData object through ajax using a display:none file-inputIE10 使用 display:none 文件输入通过 ajax 发送 FormData 对象
【发布时间】：2015-10-30 00:49:24
【问题描述】：

在通过 ajax 发送包含 display:none 文件输入的表单时遇到了一些麻烦。在 Chrome (46.0.2490.71) 中它工作正常，但在 IE10 (10.0.9200.17492) 中。直到现在我还没有成功解决这些问题，重要的是上传也可以在 IE10 中工作。

我有一个包含多个输入元素的表单。其中之一是输入文件。我使用 jQuery 模拟输入文件点击：

$('.file-upload span').click(function () {
        $(this).parent().find('input[type=file]').click();
});

<div class="col-xs-8 col-sm-7 col-md-4 col-lg-4 input-group file-upload" data-field-name="FILENAME">
      <input type="file" name="p_doc" class="form-control" placeholder="" maxlength="2000" id="FILENAME">
      
      <input type="text" class="form-control hidden" value="" readonly="">
      
      <span class="input-group-addon" title="Search for file...">
       <span class="glyphicon glyphicon-folder-open"></span> &nbsp;Browse
      </span>
      <input type="hidden" name="p_arg_values" value="">
</div>

我尝试了几种可能性，如下所示。我在互联网上搜索了解决方案，但找不到任何可以解决我的麻烦的方法。我知道在 IE10 中支持 formData。

formData = new FormData();
var inputFiles = $('#FILENAME').get(0);
formData.append('p_doc', inputFiles.files[0]);

$('form input[type!=hidden][name=p_arg_values]').each(function () {
  formData.append($(this).attr('name'), $(this).val());
});

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

$('form input[type!=hidden][name=p_arg_values]').each(function () {
    formData.append($(this).attr('name'), $(this).val());
});

如果我没有在输入文件上设置 display:none 并且我们直接使用以下代码设置输入文件，它就可以工作。但如果输入文件被隐藏，我会收到错误“SCRIPT5：访问被拒绝”。

formElement = document.querySelector("form");
formData = new FormData(formElement);

formData对象构建完成后，会通过ajax发送到oracle程序。

$.ajax([ORACLE_PROCEDURE], {
        processData: false,
        contentType: false,
        data: formData,
        method: 'POST'
})

谁能帮忙解决这个问题？

【问题讨论】：

标签： javascript ajax html file-upload internet-explorer-10

【解决方案1】：

IE 有严格的安全策略来防止文件输入被操纵 (getting access is denied error on IE8)。
您可以做的是将文件输入的不透明度设置为 1% 并将其放在按钮上。用户会认为他们正在按下按钮，但实际上它是正在单击的文件输入。

【讨论】：

感谢@Musa 的提示。这是解决此问题的好方法。