js实现前端图片上传即时预览功能

现在可以说，实现前端图片的即时预览是一件非常简单的事情。

我们只需要使用file对象和FileReader对象，不需要下载类库就可以轻松实现。

HTML代码

！doctype html bodyimg src=' http : ' form input type=' file ' name=' image '/form/body/html首先，我们来谈谈input，它有一个files属性，是一个filelist对象和一个file对象的集合。

可以通过input.files[0]的语法得到这个文件对象，但遗憾的是，这个对象只包含用户选择的文件的相关信息，比如文件名、大小、类型、最后修改时间等。并且不直接提供文件的数据。

程序员只能使用这些信息来限制用户选择的文件。

因此，我们需要使用另一个对象FileReader来读取用户选择的文件的数据

我们初始化一个文件阅读器对象

var x=新的FileReader这是一个初始化的文件阅读器对象，包含一些属性和支持的事件

与Ajax类似，FileReader提供readyState来检查读取状态，但它没有任何用处

因为FileReader还提供了onloadend等事件来处理读取数据后的操作，所以onprogress是最有趣的。只要正在读取数据，这个事件就会不断触发，可以达到进度条效果。

还有一个极其重要的属性，result，初始化完成时为null，是读取数据后获取的数据。

接下来，我们可以使用这个对象来读取用户选择的图像。没有什么错是这么简单的

当用户选择一个文件时，输入时会触发一个更改事件，这意味着我们可以开始读取数据。

document.forms[0]。元素[0]。onchange=function(){ x . readasdataurl(this . files[0])；} readASDateURL这个方法可以读取一个文件对象，并将数据以base64格式填充到FileReader对象的result属性中。

当数据被读取时，onloadend事件将被触发，在这种情况下，数据可以被填充到img标签中

x . onloadend=function(){ document . images[0]。src=this.result}完整版本代码

！DOCTYPE html html bodyimg src=' http : '表单输入类型=' file ' name=' image '/form script type=' text/JavaScript ' var x=new FileReader；document.forms[0]。元素[0]。onchange=function(){ x . readasdataurl(this . files[0])；} x . onloadend=function(){ document . images[0]。src=this.result}/script/body/html当然这只是一个小Demo，只实现了本地预览，可以轻松判断和限制上传的文件或者完善UI。

文件阅读器的能力不止于此，它不仅仅是readASDataURL。

不仅可以在本地预览图片、音乐，还可以预览视频，只要将result属性的值赋给相应音频或视频标签的src属性即可，但由于内存限制，读取视频往往会失败。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。