Question

我只是使用HTML5提供的新FormData类创建一个webapp。

要使用自定义样式的“选择文件”按钮，我想通过javascript触发文件输入元素上的click事件。

这适用于IE10和Chrome，但是当我尝试使用表单创建一个FormData实例时，它在IE10中失败并在此行显示消息“SCRIPT5'Access Denied'”：

var fd = new FormData(f.get(0));

如果我使用原生输入元素触发文件打开对话框，它也可以在IE10中使用。

有关测试，请参阅此jsfiddle：http://jsfiddle.net/s9aTg/2/

是否可以选择在IE10中使用此功能，或者我是否坚持使用丑陋的默认“选择文件”按钮？

提前致谢，麦克法兰

Answer 1

另一种解决方法：

var input = document.querySelector('input[type=file]');
var fd = new FormData();
for (var i = 0, l = input.files.length; i < l; i++) {
    fd.append('file', input.files[i]);
}

即使在点击样式按钮后选择了文件，它也能正常工作。

Answer 2

我无法检查，但尝试追加数据。

var formData = new FormData();
var files = event.originalEvent.target.files || event.originalEvent.dataTransfer.files;
$.each(files, function () {
  formData.append("files[]", this);
});

Answer 3

IE以其自己的风格，即使在版本10中：）

我不知道解决方案，但也许这个解决方法可以帮助您：尝试将透明输入元素放在样式化按钮上方。

<span class="open-wrapper">
    <input type="file" name="file" />
    <span class="open">open Dialog</span>
</span>

...

.open-wrapper {
    position: relative;
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
}
.open-wrapper input {
    position: absolute;
    right: 0;
    opacity: 0;
}

http://jsfiddle.net/UKV3B/

通过JS触发IE10中现有表单的FormData失败

3 个答案: