自定义浏览按钮

custom browse button

本文关键字：按钮 浏览 自定义      更新时间：2023-09-26

是否有办法打开文件对话框上传文件，点击按钮或图像，或链接…

例如:

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

我需要最简单的例子，这将在所有的浏览器工作。我想使用纯javascript或ajax

这是我处理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>

查看此处:处理难看的浏览按钮

策略是将不透明度=0且position:absolute的文件放入position:relative的容器中。因此，输入对用户是不可见的，但是当用户单击容器时，输入单击事件将按预期触发。

你能做些什么来满足你自己的需求:

  • 插入你想要的图像到容器&
  • 更改文件输入的大小&

祝你好运!

是的，这是可能的，AJAX不相关。代码将是:

<a href="#" onclick="document.getElementById('fileID').click(); return false;" /> Select File To Upload</a>

它可能不能在某些浏览器上工作，我写的快速测试在Chrome 15(测试版)，IE9和Firefox 6上运行良好，所以我想这涵盖了大多数现代浏览器。

相关文章：