Question

我试图能够在我的视图中显示我的img类。但是也可以使用img来点击它以弹出文件选择器。

我怎么能这样做我不确定。我想也许可以用java脚本来做但不确定如何。不要＆＃34;没有选择要显示的文件。

<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>

Answer 1

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

使用jQuery 或没有它：

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

Answer 2

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

参考：twitter中的个人资料设置页面，使用chrome调试器查看元素和样式。 https://twitter.com/settings/profile

Answer 3

这是从以下Source

中获取的示例代码

的CSS：

<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>

HTML：

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

JS：

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

单击img类以上载文件

3 个答案: