javascript - IE10使用显示通过ajax发送FormData对象:none file-input

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:访问被拒绝”。

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% 并将其放置在按钮上。用户会认为他们正在按下按钮，但实际上正在单击的是文件输入。