3

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

为了有一个自定义样式的“选择你的文件”按钮，我想通过 javascript 在文件输入元素上触发点击事件。

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

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

如果我使用本机输入元素触发文件打开对话框，它也适用于 IE10。

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

是否有一个选项可以在 IE10 中进行这项工作，或者我是否坚持使用丑陋的默认“选择文件”按钮？

在此先感谢，麦克法兰

4

3 回答 3

2

另一种解决方法：

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]);
}

即使在单击样式按钮后选择了文件，它也可以工作。

于 2012-11-21T11:03:29.693 回答
0

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

var formData = new FormData();
var files = event.originalEvent.target.files || event.originalEvent.dataTransfer.files;
$.each(files, function () {
  formData.append("files[]", this);
});
于 2012-10-29T16:23:16.240 回答
0

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/

于 2012-11-20T15:43:07.907 回答