input选取图片预览

在WEB中,默认的input type="file"选择图片后会显示一个文件名 图片.png

准备把这个浏览按钮替换成图片,然后点击图片,弹出浏览本地文件,并显示新选择的图片.

主要思路:<label></label>能达到联动的效果

<input type="file"/>设置一个ID,并且隐藏掉
在label里放入<img />,label的for属性,指向input的ID

<input type="file" name="banner" id="banner" style="display:none" />
<label for="banner">
  <img src="text.jpg" />
</label>

现在点击图片就能调起,本地文件浏览功能.

接下来,展示用户选择的图片

首先给<img />加一个标记,因为后边要更改它的src属性

<input type="file" name="banner" id="banner" style="display:none" />
<label for="banner">
  <img src="text.jpg" class="banner" />
</label>

JS代码

$('input[type=file]').on('change',function(){
//获取到此input的ID,例子中为banner  
var eleID = $(this).attr('id');
//那么要修改的就是class='banner'的<img />
 $('.'+eleID).attr('src',URL.createObjectURL($(this)[0].files[0]))
})

效果展示

1.点击图片弹出浏览窗口 图片.png

2.展示选定的图片

图片.png