javascript - 自定义浏览按钮

Question

有没有办法通过单击按钮、图像或链接来打开文件对话框来上传文件。

例如:

<a href="" onclick="openDialogBox('fileID')....." /> Select File To Upload</a>
<input type="file" id="fileID" />

我需要一个适用于所有浏览器的最简单的示例。我想使用纯 javascript 或 ajax。

Answer 1

这就是我处理 HTML 和 CSS 的方式

(我认为没有必要通过调用任何javascript):

<style>
    span.browse_but { font-family:Arial; width:65px; height:20px; text-align:center; line-height:18px; margin:0px; font-size:10px; font-weight:bold;
                        border:1px solid #ccc; float:left; cursor:pointer; padding:0px; background:#eee; display:block; float:left; overflow:hidden; }
    span.browse_but font { font-size:16px; color:#c00; }
    span.browse_but input { position:absolute; cursor:pointer; right:0px; top:0px; height:20px; width:195px; margin:0px; opacity:0; filter:alpha(opacity=0); }
</style>

<span style="position:relative;" class="browse_but">
    <font style="font-weight:bold; color:#093; position:relative; top:2px; font-size:17px;">+</font> Pick a file
    <input name="F" type="file" value=""/>
</span>

请参阅此处的 fiddle :Deal with ugly browse button

策略是在具有position:relative的容器内创建不透明度=0和position:absolute的文件输入。因此，输入对用户来说是不可见的，但是当他们单击容器时，输入单击事件将按预期触发。

您可以采取哪些措施来满足您自己的需求:

• 将所需的图像插入容器并正确放置；
• 更改文件输入和容器的大小以适合图像；

祝你好运!