Input File选择图片后，未保存预览

Posted 2021-02-05 liaoxun

今天实现上传图片到服务器

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

简单的html代码：

1 <div>
2 <img src="" class="img">
3 </div>
4  
5 <input type="file" class="imgInput">

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

然后就是jQuery代码，很简单

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

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

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