概述
//第一种方法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>
<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" οnclick="fileSelect();"></p><form id="form_face" enctype="multipart/form-data" style="width:auto;">
<input type="file" name="fileToUpload" id="fileToUpload" οnchange="fileSelected();" style="display:none;">
</form>
</div>
<script type="text/javascript">
function fileSelect() {
document.getElementById("fileToUpload").click();
}
function fileSelected() {
// 文件选择后触发次函数
}
</script>
最后
以上就是高大太阳为你收集整理的两种方法实现点击图片调用上传功能的全部内容，希望文章能够帮你解决两种方法实现点击图片调用上传功能所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
![html5 file样式,如何用纯css实现input[type=file]的样式控制（代码示例）](/uploads/reation/bcimg11.png)
发表评论 取消回复