Javascript 点击img类上传文件

我试图在我的视图上显示我的img类，但也可以使用该img来单击它以弹出文件选择器

我怎么能做到这一点我不确定。我原以为可以用java脚本实现，但不确定如何实现。不希望未选择要显示的文件

<div class="form-group">
<label  for="input-image" class="col-lg-2 col-md-12 col-sm-2 col-xs-12"><?php echo $entry_image; ?></label>
<div class="col-lg-2 col-md-2 col-sm-10 col-xs-12">
<img class="thumbnail"  src="<?php echo $image; ?>" style="width:100px; height:100px;"/>
</div>
</div>

使用jQuery 或没有它：

<input type="file" style="position:absolute;opacity:0" id="file"><img onclick="document.getElementById('file').click();">

---

文件选择器是浏览器的原始行为，您只能通过图像背景模拟原始文件输入，并通过设置不透明度样式隐藏原始输入按钮

请参阅：在twitter的配置文件设置页面中，使用chrome调试器查看元素和样式。

---

这是从以下代码中提取的示例代码

css:

html:

js:

---

你有没有在谷歌上寻找你的问题？我刚刚在IE11上测试了不透明度：0，效果很好。我强烈建议你放弃支持IE8。这很危险，你在浪费时间。我建议您将代码分成两部分：一部分带有img点击事件并隐藏输入，另一部分用于带有标准输入的IE8。

<input type="file" style="position:absolute;opacity:0" id="file"><img onclick="document.getElementById('file').click();">

<style>
.element{
background-color:red;
width:200px;
}
.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
    width:200px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

</style>

<input id="uploadFile" placeholder="Choose File" disabled="disabled" />
<div class="fileUpload">
    <div class="element">Upload</div>
    <input id="uploadBtn" type="file" class="upload" />
</div>

<script>
document.getElementById("uploadBtn").onchange = function () {
    document.getElementById("uploadFile").value = this.value;
};
</script>