定制的浏览按钮

有没有办法打开文件对话框，上传文件，上的按钮或图像，或链接的点击..定制的浏览按钮

例如：

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

我需要最简单的例子，可以在所有浏览器中使用。我喜欢使用纯javascript或ajax。

来源

2011-10-09 John

编号（（还有9个以上）） – Zirak

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

见小提琴这里：Deal with ugly browse button

策略是在一个位置为relative的容器内进行opacity = 0和position：absolute的文件输入。因此，输入对用户是不可见的，但是当他们点击容器时，输入点击事件将按预期触发。

你可以做什么，使这个适应自己的需要：

插入你想放入容器&位置得当的图像;
更改文件的大小输入&容器以适应图像;

祝你好运！

来源

2011-10-09 12:47:41

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

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

它可能无法在某些浏览器，我写quick test工作正常在Chrome 15（测试版），IE9和Firefox 6，所以我想这涵盖了大部分现代浏览器。

来源

2011-10-09 11:36:32

定制的浏览按钮

回答

相关问题