javascript - 如何使图像功能类似于文件输入字段的 "browse"按钮？

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(文档).ready(函数(){

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

});