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

发布于 2024-12-29 00:28:03 字数 366 浏览 0 评论 0原文

是否可以通过单击 input type= 来打开 选择要上传的文件 对话框,而不是使用 input type="file" html 标签“按钮”?然后,当从选择要上传的文件对话框中选择文件时,文件路径会被插入到常规htmlinput type="text"标签中吗?

我似乎 gmail 做了类似的事情,但没有按钮和文本输入,它们只是有一个链接添加文件或类似的东西。单击该链接后,会显示选择要通过 mail.google.com 上传的文件对话框。单击文件时,文件名会显示在屏幕上。

他们是怎么做到的?

Instead of using an input type="file" html tag, is it possible to bring up a choose a file to upload dialog box by clicking a input type="button"? Then when a file is selected from the choose a file to upload dialog box, the file path gets inserted into a regular html input type="text" tag?

I've seem that gmail does something similar but not with buttons and text inputs, they simply have a link add file or something like that. When that link is clicked, it shows the select file(s) to upload by mail.google.com dialog box. When a file is clicked, the file name is shown on the screen.

How are they doing that?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

祁梦 2025-01-05 00:28:03
<input type="file" style="display:none;" id="inputfile"/>
<a href="javascript:document.getElementById('inputfile').click(); ">try this</a>

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

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

Try this one. I think it is useful.. :)

初懵 2025-01-05 00:28:03

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


顺便说一句,如果您想对其进行样式设置,也许这​​会起作用:http://www. quirksmode.org/dom/inputfile.html

I think most browsers have this locked down for security purposes. Buttons and text boxes can be manipulated via JavaScript. File input boxes cannot, and for good reason; imagine if a javascript could open a dialog, set the path to a sensitive file on your system, then simulate the button click to download the file!


By the way, if you are looking to style it, perhaps this would work: http://www.quirksmode.org/dom/inputfile.html

幻梦 2025-01-05 00:28:03

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

注意:< /strong>

a) 这可能不适用于旧版浏览器(主要是 IE),因为它们不会在文件输入上触发更改事件。

b) 为了使上传按预期进行,您需要在表单中包含 元素。文本元素最多可用于显示所选文件。

Check this fiddle: http://jsfiddle.net/A4BS7/1/

NOTE:

a) This may not work well on older browsers (mainly IE) that don't fire the change event on the file input.

b) For the upload to work as expected, you'll need to include the <input type="file"> element in your form. The text element can be used for displaying the selected file at best.

孤者何惧 2025-01-05 00:28:03

无法根据需要更改 input[type=file],它是纯粹的本机表单元素。

此外,出于安全原因,您将无法获取文件的路径。旧版 IE 会显示路径,但新版本不再出现这种情况,并且您将无法在服务器端对路径执行任何操作。

有一些样式设置方法:

It is not possible to alter an input[type=file] as you like, it is a purely native form element.

Besides you won't be able to get the path to the file for security reasons. Old IE versions shows the path but it is not the case anymore with newer versions and you won't be able to do anything with the path on server-side anyway.

There are though some methods to style:

甜心小果奶 2025-01-05 00:28:03

看看 plupload,我已经用它很多次来处理文件了正在上传。

Have a look at plupload, I've used it many times to handle file uploading.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文