Question

这基本上简化了我现在所拥有的：

<style>
form.noshow { height: 0; overflow: hidden; }
</style>

<form class=noshow target="SomeIframeThatExists">
  <input type=file id=uf>
</form>

<a id=uflink href="/user/photo">Upload photo</a>

<script>
$('uf').addEvent('change', function(e) {
  // alert('oele'); // this would work fine
  this.form.submit(); // auch in IE > "Access denied" exception
});
$('uflink').addEvent('click', function(e) {
  $('uf').click(); // opens file dialog in all browsers inc IE
  return false;
});
</script>

Chrome 11和FF 4中的功能（完美）：

表格已隐藏。
您点击了链接
选择文件对话框
您选择了一个文件
对话框关闭
表格已提交
执行iframe中的脚本并替换照片

非常高科技和甜蜜。

在IE中，所有这些都有效，除了[6]。表格未提交。 Javascript错误：“访问被拒绝”。无论表单如何不可见，只要使用input.click()打开对话框，就无法在更改时提交表单。（onchange函数执行正常。只有在调用form.submit()时才会出现错误。）

现在所有这些我都能接受。 IE糟透了。我和它一起生活。

到目前为止我的解决方案是检查navigator是否为“MSIE”，然后单击链接而不是打开对话框，显示表单（带文件输入）。然后用户必须单击实际的，丑陋的文件输入，然后一切正常。但很难看。

问题有两个：

有没有办法在IE中像Chrome一样酷？没有讨厌的flash / java垃圾。只有html元素和javascript。
如果没有：从链接打开对话框后是否有办法检查form.submit（）支持（!navigator.contains("MSIE")除外）？

[2]可能会捕获IE中抛出的“拒绝访问”异常，但是为时已晚：用户已经打开对话框并浏览到了照片。你不想让他再这样做。（即使是IE用户也不配。）

PS。我只对Chrome 10 +，Firefox 3.6+和IE8 +感兴趣。

PS。可能很重要：文件输入元素不能在链接附近的任何地方，因为链接在表单内，并且该表单（必须）与文件上载表单分开。

更新
第二好：检测对这种仅在IE中不起作用的高科技行为的支持。我不想使用navigator.appName.contains('MSIE')，因为这不灵活，不一定是真的。

Answer 1

我做到了!!

http://jsfiddle.net/rudiedirkx/8hzjP/show/

<label for="picture">Upload picture</label>
<input type="file" id="picture" style="position: absolute; visibility: hidden" />

IE8有效。我不在乎别人。

这么容易=）

Answer 2

确实很奇怪，只有在表单中有enctype="multipart/form-data"时，IE8才会阻止提交。

在本地工作的一个解决方法是添加“真实”提交按钮，例如

<input type="submit" id="btnSubmit" value="Submit" />

然后提交此类代码：

$('btnSubmit').click();

如果这样可行，您可以使用CSS隐藏按钮，使其对用户透明。

Answer 3

嗯，这是我现在遇到的完全相同的问题。并且只有（令人作呕）解决的问题是使用CSS输入[type = file]相当大，使其为alpha = 0并将其置于预期的UI元素之上。

简而言之，你让用户点击丑陋的“浏览”按钮，而他/她没有意识到。

Answer 4

尝试将标记enctype="multipart/form-data"添加到您的form元素。

在IE中打开文件输入对话框并上传onchange？

4 个答案: