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

98 阅读 0 评论 65 点赞

我是靠谱客的博主香蕉金毛，这篇文章主要介绍jQuery实现input选择文件（图片）之后，预览图片的效果，现在分享给大家，希望可以做个参考。

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

HTML代码如下，简写：

复制代码

1
2
3
4
5
6
7
<!--选择文件的input-->
<input type="file" class="imgInput" />

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

然后就是JS代码了，我这里用的是jQuery，看代码：

复制代码

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

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

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