如何使图像功能类似于文件输入字段的“浏览”按钮？

Question

我为客户创建了一个站点，该站点要求用户单击图像，然后显示一个输入类型的文件字段，其中包含通常的浏览按钮和提交按钮。然后用户在他们的硬盘上找到一个文件并点击上传。

但我的客户不喜欢这样，她希望图像本身具有浏览按钮的功能，因此当用户单击图像时，它会自动提示他们从硬盘驱动器中选择文件。

我的第一直觉是这样做：

我仍然有输入类型的文件表单字段，但使用 css display none 属性隐藏它。当用户单击图像时，我将使用 jQuery 自动单击浏览按钮。我不确定这是否可行，因为我还没有实现它。但在我这样做之前，您能想出一种更好/更清洁的方法吗？

Answer 1

创建一个文本字段和一个图像。以便它们与输入类型文件对齐。现在降低输入文件的不透明度。当您单击图像时，它实际上是在单击透明文件类型。改变输入类型文件的值改变文本字段的值。

<input type="text" style="color: #666;width:155px;vertical-align:top;" id='file-upload-text' />
<a href='javascript:void(null);' > <img src='browse.png' > </a>
<input type="file" id="file-upload" name="Filedata" style="color:#666;position:relative;z-index:2;opactity:0;-moz-opacity:0 ;filter:alpha(opacity: 0);" >
<a href='javascript:void(null);'>
<input type='image' src='upload.png' id="file-upload-submit">  </a>

脚本部分可以是：

jQuery(document).ready(function(){

jQuery("#file-upload").change(function(){
    jQuery("#file-upload-text").val(this.value);
});

});

Answer 2

基于以上一些的想法

<div id="file-upload-text"></div>
<div style="background: url(http://phpfileuploader.com/images/upload.png); width: 48px; height: 48px; overflow: hidden">
<input type="file" id="file-upload" name="Filedata" style="opacity:0;-moz-opacity:0 ;filter:alpha(opacity: 0); width: 48px; height: 48px;" onchange="document.getElementById('file-upload-text').innerHTML= this.value" >
</div>

第 1 行：将生成文件路径的位置，使用 CSS
第 2 行：设置图像按钮背景图像的 div，宽度和高度图像，并将溢出设置为隐藏。
第 3 行：不透明度为 0 的文件输入标记（也是过滤器或 MSIE）； onchange 事件以文件输入标记的值更改 第 1 行 中 div 的内部 html
第 4 行：关闭 div

Answer 3

由于安全原因，浏览器会阻止对文件上传字段进行任何更改，这是一个经过验证的标准。您可以使用 Flash 上传器。

Answer 4

我会建议类似的事情。从按钮上的点击事件调用上传的点击事件。出于安全考虑，只有文件输入类型可以直接打开浏览窗口。

实现一个调用文件输入窗口打开的按钮相当简单，参见 JsFiddle 上的概念证明

http://jsfiddle.net/JQaRu/

编辑：这仅适用于 IE。出于某种原因，显然在文件输入上调用点击事件也是一种安全风险。

编辑：修改了文件输入的样式，现在它也可以在 Chrome 中使用...http://jsfiddle.net/JQaRu/40/