按钮显示选择要上载的文件对话框

Question

可以通过点击input type="file"来显示choose a file to upload对话框，而不是使用input type="button" html标记？然后，当从choose a file to upload对话框中选择文件时，文件路径会插入到常规的html input type="text"标记中吗？

我看起来gmail做了类似但没有按钮和文本输入的东西，他们只是有一个链接add file或类似的东西。单击该链接后，将显示select file(s) to upload by mail.google.com对话框。单击文件时，屏幕上会显示文件名。

他们是怎么做到的？

Answer 1

<input type="file" style="display:none;" id="inputfile"/>
<a href="javascript:document.getElementById('inputfile').click(); ">try this</a>

试试这个。我觉得它很有用.. :)

Answer 2

我认为大多数浏览器都出于安全考虑而将其锁定。可以通过JavaScript操作按钮和文本框。文件输入框不能，并且有充分的理由;想象一下如果javascript可以打开一个对话框，设置系统上敏感文件的路径，然后模拟按钮点击下载文件！

---

顺便说一句，如果你想要设计风格，也许这样可行：http://www.quirksmode.org/dom/inputfile.html

Answer 3

检查这个小提琴：http://jsfiddle.net/A4BS7/1/

注意：

a）这可能不适用于不会在文件输入上触发更改事件的旧浏览器（主要是IE）。

b）要使上传按预期工作，您需要在表单中包含<input type="file">元素。 text元素可用于最佳显示所选文件。

Answer 4

无法根据需要更改input[type=file]，它是纯粹的原生元素。

此外，出于安全原因，您将无法获取该文件的路径。旧的IE版本显示了路径，但不再是新版本的情况，你无论如何都无法对服务器端的路径做任何事情。

虽然有一些风格的方法：

• Styling File Upload / Select Input Control
• Styling an input type="file"
• Styling file inputs with CSS and the DOM

Answer 5

看看plupload，我已经多次使用它来处理文件上传。