jQuery实现input选择文件（图片）之后，预览图片的效果

81 阅读 0 评论 54 点赞

我是靠谱客的博主香蕉金毛，最近开发中收集的这篇文章主要介绍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]));
});

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

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。