优秀的编程知识分享平台

网站首页 > 技术文章 正文

FileReader实现图片预览（前端pdf预览）

nanyue 2024-10-10 07:27:28 技术文章 5 ℃

1.检测浏览器对FileReader兼容性的方法：

if(window.FileReader) {
var fr = new FileReader();
// add your code here
}
else {
alert("Not supported by your browser!");
}

方法二：检测FileReader类型

if(typeof FileReader==='undefined'){
alert('您的浏览器不支持图片上传，请升级您的浏览器');
return false;
}

2.调用fileReader对象的方法

FileReader实例拥有四个方法, 其中三个是用来读取文件, 另一个是用来中断读取的。需要注意的是, 无论读取成功或是失败, 方法并不会返回读取结果,

这一结果(储存在result属性中)要用FileReader处理事件去获取；

方法名 参数 描述

abort none 中断读取

readAsBinaryString file 将文件转化为二进制码

readAsDataURL file 读取文件内容, 结果用data:url的字符串形式表示

readAsText file,[encoding] 将文件读取为文本

readAsText：该方法有两个参数, 其中第二个参数是文本的编码方式, 默认值为 UTF-8。这个方法非常容易理解, 将文件以文本方式读取, 读取的结果即是这个文本文件中的内容。

readAsText(file,encoding)可按指定编码方式读取文件, 但读取文件的单位是字符, 故对于文本文件, 只要按规定的编码方式读取即可; 而对于媒体文件(图片、音频、视频),

其内部组成并不是按字符排列, 故采用readAsText读取, 会产生乱码, 因此不是最理想的读取文件的方式。

readAsBinaryString：该方法将文件读取为二进制字符串, 通常我们将它传送到后端, 后端可以通过这段字符串存储文件。

readAsDataURL：这是例子程序中用到的方法, 该方法将文件读取为一段以 data: 开头的字符串, 这段字符串的实质就是 Data URL, Data URL是一种将小文件直接嵌入文档的方案。

这里的小文件通常是指图像与 html 等格式的文件。控制台为当前所传文件的base64编码表示。

由于媒体文件的src属性, 可以通过采用网络地址或base64的方式显示，因此我们可以利用readAsDataURL实现对图片的预览。

3.处理事件

FileReader 包含了一整套完成的事件模型，用于捕获读取文件时的状态,下面这个表格归纳了这些事件。

事件 描述

onabort 中断时触发

onerror 出错时触发

onload 文件读取成功完成时触发

onloadend 读取完成时触发，无论读取成功或失败

onloadstart 读取开始时触发

onprogress 读取中

result 返回文件的内容。只有在读取操作完成后，此属性才有效，返回的数据的格式取决于是使用哪种读取方法来执行读取操作的。

readyState 提供 FileReader 读取操作时的当前状态。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="file" id="imgFile"/>
<img id="viewImg" src=""/>
</body>
<script type="text/javascript">
    //绑定change事件
    document.getElementById("imgFile").addEventListener("change",function(){
        //获取选择文件的信息
        let file=this.files[0];
        //判断浏览器是否支持FileReader
        if(window.FileReader){
        //创建FileReader对象
        let reader=new FileReader();
        // 使用URL格式的字符串以表示所读取文件的内容。
        reader.readAsDataURL(file);
        //读取开始时触发
        reader.onloadstart=function(){
            console.log("开始读取...");
        }
        //读取中
        reader.onprogress=function(){
            console.log("读取中...");
        }
        //读取完成时触发，无论读取成功或失败
        reader.onloadend=function(){
            console.log("读取完成...");
        }
        //文件读取成功完成时触发
        reader.onload=function(){
            console.log("读取成功");
            document.getElementById("viewImg").src=this.result;
        }
            //文件读取失败时触发
            reader.onerror=function(){
                console.log("读取失败");
            }
        }
    })
</script>
</html>

Tags：

猜你喜欢

最近发表
标签列表