安然不哭-西坝阿超个人博客

input file选择图片后 预览

2018-5-30 钟建超

简单的jQuery实现input file选择图片后，可以预览图片的效果

简单的HTML代码：

<div>
<img src="" class="img">
</div>
 
<input type="file" class="imgInput">

注：img就是用来显示预览图片的

然后就是jQuery代码，很简单

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

然后就实现了选择图片后可以预览图片的效果了

其中需要注意的是使用的是DOM元素，jQuery元素和DOM元素之间的转换

标签: html