插入图像代替选择文件

Question

我希望代替选择文件当我点击浏览图片时，它应该像选择文件一样工作。我正在使用这段代码但有些事情是错误的。

    print ("<tr><td align='right'  style='font-weight: bold;'>" . T_("Torrent File") . ": </td><td style='background: url(/file.png) no-repeat;'> <input type='text' name='torrent' id='torrent' style='border: none;background: transparent;'/><a onclick='browse('".$_FILES['torrent']['name']."')' ><img src='/brw.png' style='margin-left:74px;margin-top:-7px;'></a><input type='file' name='torrent' value='" . $_FILES['torrent']['name'] . "' style='opacity: 50;width: 210px;height: 25px;border: 2px;
background: transparent;
filter: alpha(opacity=0);margin-top:-39px;margin-left:34%;
display: block!important;' onchange='setPath('torrent',this.value)'></td></tr>");

我将通过降低不透明度来隐藏选择文件。我想在 file.png 中的文本部分显示Path。

Answer 1

请查看与＆＃34;输入类型文件自定义设计＆＃34;

相关的一些演示

<style>
#fileElem {
  /* Note: display:none on the input won't trigger the click event in WebKit.
    Setting visibility: hidden and height/width:0 works great. */
  visibility: hidden;
  width: 0;
  height: 0;
}
#fileSelect {
  /* style the button any way you want */
}
</style>

<input type="file" id="fileElem" multiple>
<button id="fileSelect">Select some files</button>

<script>
document.querySelector('#fileSelect').addEventListener('click', function(e) {
  // Use the native click() of the file input.
  document.querySelector('#fileElem').click();
}, false);
</script>

DEMO

其他相关示例

DEMO 1

DEMO 2