JS实现图片预览的两种方式

前端之家收集整理的这篇文章主要介绍了JS实现图片预览的两种方式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

考虑到用户体验, 网页的图片上传数据库前,先预览是很有必要的一个步骤,第一可以给用户带来安全感,第二防止图片文件有问题而提交到数据库,占用存储资源。

方法对选择的图片数据(可以勉强理解为input的value)生成一个blob对象路径,第二种是用获取 FileReader读取器。

那么无论那种方法,首先都得得到文件数据,获得文件数据是从files集合中获取

方式一:

代码如下:

inp.onchange=function(){ var file=this.files[0] // 获取input上传图片数据; var img=new Image() ; url=window.URL.createObjectURL(file) // 得到bolb对象路径,可当成普通的文件路径一样使用,赋值给src; img.src=url; //其实也可一句代码搞定,不需要声明那么多变量;img.scr=window.URL.cteateObejectURL(this.files[0]) ; 然后把img添加页面就实现预览了 }

猜你在找的JavaScript相关文章