jQuery实现本地input选择图片实时显示
在写图片上传功能时，如果可以实时预览就好了，我们可以通过 jQuery 实现这一效果。
为了更加美观，可以结合我之前写的一篇文章，给图片显示区域设置一个默认图片：HTML img src图片路径不存在，则显示一张默认图片的方法
HTML代码如下：
<p>
<img class="img" src="" onerror="this.src='img/default.png'" width="100" height="100">
</p>
<input class="select" type="file">效果如下图：
JS代码：
当 input 按钮改变时，给 img 设置 src
<script>
$('.select').change(function(e) {
var _URL = window.URL || window.webkitURL;
var file, img;
if ((file = this.files[0])) {
img = new Image();
img.onload = function() {
$('.img').attr('src', this.src);
};
img.src = _URL.createObjectURL(file);
}
})
</script>效果如下图：
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018-04-27)，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
