jQuery实现input选择文件(图片)之后,预览图片的效果

input选择图片之后,想要先预览一下图片,而不是只显示文件名称,其实代码很简单

HTML代码如下,简写:

<!--选择文件的input-->
<input type="file" class="imgInput" />

<!--用来显示图片的div,自定义样式-->
<div>
<img src="" class="img" />
</div>

然后就是JS代码了,我这里用的是jQuery,看代码:

$(".imgInput").change(function(){
 $(".img").attr("src",URL.createObjectURL($(this)[0].files[0]));
});

就这么简单,显示图片的样子就自定义样式就行了

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页