好资源导航 » 文章资讯 » JS实现图片预览的两种方式

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

2024-02-17 22:23:03 53

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

那么要实现预览有两种方式：一种是用window.URL.createObjectURl方法对选择的图片数据（可以勉强理解为input的value）生成一个blob对象路径，第二种是用获取FileReader读取器。

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

方式一：

代码如下：