两种方法实现点击图片调用上传功能

//第一种方法html+css 方式:

<style>

.fileInputContainer{
height:256px;
background:url('upfile.png');
position:relative;
width: 256px;
}
.fileInput{
height:256px;
overflow: hidden;
font-size: 300px;
position:absolute;
right:0;
top:0;
opacity: 0;
filter:alpha(opacity=0);
cursor:pointer;
}

</style>&nbsp;
<div class="fileInputContainer"><input class="fileInput" id="" type="file" name=""></div>

//第二种方法html+css+js 方式:

<div class="face">

<p><img class="normalFace" src="./images/upload.jpg" onclick="fileSelect();"></p>
<form id="form_face" enctype="multipart/form-data" style="width:auto;">
<input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"
 style="display:none;">
</form>
</div>
<script type="text/javascript">
function fileSelect() {
document.getElementById("fileToUpload").click();
}

function fileSelected() {
// 文件选择后触发次函数
}
</script>

 

原文链接:https://blog.csdn.net/wangjiangnan17214/article/details/70229693

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注