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

Question

我在通过 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: Access is denied".

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

构建 formData 对象后，它将通过 ajax 发送到 oracle 过程。

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

谁能帮忙解决这个问题？

Answer 1

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

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

IE10 send FormData object through ajax using a display:none file-input

javascript

ajax

html

file-upload

internet-explorer-10