javascript javascript触发对话框打开时如何让IE8/9提交输入类型=“文件”

How to make IE8/9 submit input type="file" when javascript triggered dialog open

提问by Dmitriy Likhten

If I have an input type="file"somewhere, and on click of some link it also triggers a click on the file input. The user picks a file.

如果我有一个input type="file"地方，并且点击某个链接，它也会触发点击文件输入。用户选择一个文件。

In IE8/9 if the user clicks on a button type="submit"the first click clears all data in the file input, then the second submits a blank form.

在 IE8/9 中，如果用户单击button type="submit"第一次单击清除文件输入中的所有数据，然后第二次提交空白表单。

How do I allow submission of the input type="file"post a javascript click trigger.

我如何允许input type="file"通过 javascript 单击触发器提交帖子。

Some notes:

一些注意事项：

• The click was triggered as a consequence of another click event. Within the event.
• The input type="file" is not set to display: none.
• No attempt to manipulate the user input was done

• 该点击是由另一个点击事件触发的。事件内。
• 输入类型 =“文件”未设置为显示：无。
• 未尝试操纵用户输入

Ideas?

想法？

采纳答案by Dmitriy Likhten

I found that using the jquery fileupload extensionis just better. It handles the intricacies much much better than I could had I been doing it manually. It basically does what jquery does for x-browser dom manipulation & ajax but for input type="file".

我发现使用jquery fileupload 扩展名更好。它处理复杂性比我手动处理要好得多。它基本上做了 jquery 为 x-browser dom 操作和 ajax 所做的事情，但对于 input type="file"。

回答by vee

I've been struggling with the same problem, and I'm yet to come across a clean solution.

我一直在为同样的问题苦苦挣扎，但我还没有找到一个干净的解决方案。

I have however, discovered a work-around. Please note the the solutions below completely disregard best practices (in my humble opinion) and if anyone has a better, more standards-compliant way of doing this, please post it here.

然而，我发现了一个变通方法。请注意下面的解决方案完全无视最佳实践（以我的拙见），如果有人有更好、更符合标准的方法来做到这一点，请在此处发布。

Fixing the button click event

修复按钮点击事件

After a fair amount of research, it seems a lot of people are using a trick whereby they absolutely position the <input type="file" />immediately over their button, and set the opacity to zero. This means that, to the user, it looks like they are clicking on a button, but the browser sees it as a click on the <input type="file" />(and thus avoids the mentioned issue in IE). I was surprised to see that Quirksmodeactually recommended this approach.

经过大量的研究，似乎很多人都在使用一种技巧，即他们绝对将<input type="file" />直接放在按钮上，并将不透明度设置为零。这意味着，对于用户来说，看起来他们正在点击一个按钮，但浏览器将其视为点击<input type="file" />（从而避免了 IE 中提到的问题）。我很惊讶地看到Quirksmode实际上推荐了这种方法。

Fixing the button styles

修复按钮样式

Now, this does introduce further cosmetic problems; you may find that your buttons no longer trigger their :hoverand :activeCSS pseudo classes (unless you placed the <input type="file" />inside your button), and that your mouse cursor will probably be the default mouse cursor, despite any CSS you've applied to your <input type="file" />or your button.

现在，这确实引入了进一步的美容问题；您可能会发现您的按钮不再触发它们的:hover和:activeCSS 伪类（除非您将 放在<input type="file" />按钮内部），并且您的鼠标光标可能是默认鼠标光标，尽管您已将任何 CSS 应用到您<input type="file" />或您的按钮。

The classes are easy fix with a JavaScript work-around (I'll leave that to you), but the cursor is still an issue. Strangely, you can style the cursorof the right hand pathside of the <input type="file" \>, but this will not affect it's Browsebutton. Unfortunately this (now transparent) button will probably be over some part of your styled button, resulting in a default cursor on hover.

这些类可以通过 JavaScript 变通方法轻松修复（我将把它留给您），但光标仍然是一个问题。奇怪的是，你可以风格的cursor右手path侧<input type="file" \>，但是这并不会影响它的Browse按钮。不幸的是，这个（现在是透明的）按钮可能会覆盖你的样式按钮的某些部分，导致悬停时的默认光标。

To solve this, I stumbled across this work-around(JSFiddle here). Basically, someone has bound an event to the mousemoveevent of their button, and positioned the right-hand side of <input type="file" />under the mouse cursor every time they hover over the button. This may also need to be enhanced a bit in order to stop the <input type="file" />from being clicked on from outside of the button's co-ordinates if the button does not have a fixed size and overflow: hiddenset.

为了解决这个问题，我偶然发现了这个解决方法（这里是JSFiddle ）。基本上，有人将一个事件绑定到mousemove他们的按钮事件，并<input type="file" />在每次将鼠标悬停在按钮上时将其放在鼠标光标下方的右侧。<input type="file" />如果按钮没有固定大小和overflow: hidden设置，这可能还需要稍微增强以阻止从按钮坐标之外单击。

Conclusion

结论

Overall, I've found that styling <input type="file" />is just not worth it; there are just too many hacks, and you're probably going to have to use JavaScript at some point if you really want it to look good (not great if you're trying to support people who have JavaScript disabled). I also have no idea how this affect mobile either.

总的来说，我发现造型<input type="file" />是不值得的。有太多的黑客，如果你真的希望它看起来不错，你可能在某个时候不得不使用 JavaScript（如果你试图支持禁用 JavaScript 的人，那就不好了）。我也不知道这对移动设备有何影响。

If you're targeting newer browsers that support the Html5 File API, implement an AJAX drag / drop upload solution (hereis a nice one), and get rid of the <input type="file" />altogether. For those that don't support it (older browser and those with JavaScript disabled), just leave the unstyled <input type="file" />there as a fallback.

如果您的目标是支持Html5 文件 API 的较新浏览器，请实现 AJAX 拖放上传解决方案（这里是一个不错的解决方案），并<input type="file" />完全摆脱。对于那些不支持它的人（旧浏览器和禁用 JavaScript 的人），只需将 unstyled<input type="file" />留在那里作为后备。