<div>
<img id="button" src="../image/plus.png" alt="" title="">
<input type="file" accept="image/*" id="img" style="display:none" onchange="img();" />
</div>
<script type="text/javascript">
$("#button").click(function() {
//绑定点击,使files触发点击事件,然后完成读取文件的操作。
$("#img").click();
});
function img() {
//图片预览
var img = $("#fengmian")[0].files[0];
$("#button2").attr('src', URL.createObjectURL(img));
}
</script>
- img覆盖默认的上传input控件界面
- accept=”image/*” 限定选择文件类型为图片
- style=”display:none” 隐藏默认的界面
- 给图片绑定点击事件,回调中触发file的点击事件
- input onchang 触发 img函数 设置图片预览