javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > Js FileReader相关操作

Js中的FileReader相关操作方法总结

作者：代码冲冲冲

FileReader是前端进行文件处理的一个重要的API,特别是在对图片的处理上,这篇文章主要给大家介绍了关于Js中FileReader相关操作方法的相关资料,需要的朋友可以参考下

前言

FileReader是js中一种异步读取文件的对象,它可以将文件内容按照不同格式读取,在谈论FileReader对象前,先来介绍两个对象,Blob对象和File对象.

Blob对象

Blob 对象表示一个不可变、原始数据的类文件对象。也就是说,Blob对象一经定义,就不能再被修改了。

如何构建一个Blob对象?

通过构造函数构建

let blob = new Blob(["Hello"], {type: "text/plain"})
console.log(blob)
//返回值为:
// Blob {size: 7, type: 'text/plain'}

接下来我们分别来解释这两个参数的意义:

第一个参数: 接收一个数组(array),数组中可以存放任何类型的数据,这些数据都会被存入Blob中。

第二个参数: 接收一个对象,该对象为可选对象,该对象中包含了两个属性:

Blob相关的属性和操作

Blob对象有两个属性,分别为Size和type

let blob = new Blob(["Hello", "1", 1], {type: "text/html"})
//获取blob中存储的数据总长度
console.log(blob.size)
//获取blob中存储数据类型
//这里的数据类型实质上仅为了标识存储类型,算是一种约定
console.log(blob.type)

Blob对象有以下操作函数,这些操作函数提供了方便的API去操作Blob的数据

let blob = new Blob(["Hello", "1", 1], {type: "text/plain"})
/**
 * text()方法
 * text方法返回一个Promise对象,通过获取返回值得到Blob中存储的数据
 * @return Promise
 */
blob.text().then(res => {
    //返回值会将原先的数据全都合并起来
    //返回:Hello11
    console.log(res)
})
/**
 * slice()方法
 * slice方法会将Blob中的数据进行切片,并返回一个新的Blob对象
 * @param start:数据截取起始位置(包含)
 * @param end: 数据截取终止索引位置(不包含)
 * @param contentType/type: 分片后得到的新Blob对象内存储数据的类型,默认为''
 * @return Blob
 */
let newBlob = blob.slice(0, 3)
console.log(newBlob)
/**
 * stream()方法
 * stream方法会返回一个可读流对象
 * 该对象允许我们可以逐块读取Blob对象中的数据
 * @return ReadableStream
 */
let readableStream = blob.stream();
let reader = readableStream.getReader();
reader.read().then(res => {
    console.log(res)
    //这里返回的数据为ASCII码
    // 我们可以通过访问数组中的数据来做到分块访问
    console.log(res.value)
    console.log(String.fromCharCode(res.value[6]))//1
    console.log(String.fromCharCode(res.value[0]))//H
})
/**
 * arrayBuffer方法
 * 以二进制形式解析Blob对象的数据,并返回一个Promise对象
 * Arraybuffer对象表示一个通用原始的二进制数据缓冲区
 * @return Promise
 */
blob.arrayBuffer().then(res => {
    console.log(res)//输出一个ArrayBuffer对象
})

File对象:特殊的Blob对象

File对象是一个特殊的Blob对象,通常用来标识input上传的单个文件的信息。

简单来说,File对象是Blob对象的子类。

关于File对象的操作非常少,以下是具体属性和操作

/***
 * @param fileBits:接受一个Array,Array中存储Blob,ArrayBuffer,字符串等对象
 * @param name:文件名
 * @param options:{
 *     type:MIME类型,选择文件的类型,
 *     lastModified: 文件最后修改时间
 * }
 * @type {File}
 */
let file=new File(["test"],"test.txt",{
    type:"text/plain",
})
console.log(file)//获取文件对象
console.log(file.lastModified)//获取文件最后修改时间
console.log(file.lastModifiedDate)//获取文件最后修改时间,使用Date对象存储
console.log(file.name)//获取文件名

FileList对象

FileList对象简单来说就是存储File对象的一个容器。通常,fileList需要我们通过访问files数组获取。

FileList具体的属性如下:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<input type="file" id="file">
<script>
    let files = document.getElementById("file")
    files.addEventListener("change", (event) => {
        //通过访问files文件列表来获取fileList对象
        let fileList = event.target.files
        console.log(fileList)//查看fileList对象
        //使用fileList的API访问指定索引的File对象
        console.log(fileList.item(0))
    })
</script>
</body>
</html>

FileReader对象

铺垫了这么长时间,终于请出了这篇文章的正主,FileReader.

FileReader对象可以以异步的形式来访问用户上传的文件

FileReader的三个属性

error: 返回读取时的错误信息

readyState: 返回操作的当前状态

值状态描述
0EMPTYreader被创建,但是没有调用读取方法
1LOADING读取方法被调用
2DONE完成操作

result: 返回读取文件的结果

具体的操作和属性如下:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<input type="file" id="file">
<script>
    let fileReader = new FileReader();
    let files = document.getElementById("file")
    files.addEventListener("change", (event) => {
        let fileList = event.target.files
        let file = fileList[0]
        console.log(fileReader.readyState)//未调用函数,返回0
        /**
         * 这里readAsText接受一个Blob对象,之前说过,File对象就是特殊的Blob对象
         * 所以直接传入file对象
         * 这里readAsText用于将文件读取为文本形式
         * @param Blob 接受一个blob对象
         * @param encoding 设置编码格式
         * @return undefined 该函数没有返回值
         * */
        // fileReader.readAsText(file)
        //调用终止函数,终止文件读取
        // fileReader.abort()
        /**
         * readAsDataUrl方法
         * 该方法会将文件读取并最后返回一个基于Base64的URL到result属性中
         * 这里result中的url以data:开头
         * @param Blob 接受一个blob对象
         * @return undefined
         */
        // fileReader.readAsDataURL(file)
        /**
         * readAsArrayBuffer方法
         * 该方法会将文件读取并存储为ArrayBuffer,最后返回一个ArrayBuffer数组到result中
         * @param Blob 接受一个blob对象
         * @return undefined
         * */
        fileReader.readAsArrayBuffer(file)
    })
    /**
     * 该方法在读取时调用
     */
    fileReader.onloadstart = () => {
        console.log("开始读取")
        console.log(fileReader.readyState)//调用函数,但还没有结束,返回1
    }
    /**
     * 该方法在读取成功时调用
     */
    fileReader.onload = () => {
        console.log("读取成功")
        console.log(fileReader.result)
        console.log(fileReader.readyState)//调用完成,返回2
    }
    /**
     * 该方法在读取结束时调用
     */
    fileReader.onloadend = () => {
        console.log("读取结束")
    }
    /**
     * 读取过程中触发
     */
    fileReader.onprogress = (e) => {
        console.log("读取中")
        //获取已经加载的数据量
        console.log("loaded==>" + e.loaded)
    }
    /**
     * 该方法在调用abort函数时触发
     */
    fileReader.onabort = () => {
        console.log("操作终止")
    }
    //当读取出现失败时触发
    fileReader.onerror = () => {
        console.log("出现错误")
        console.log(fileReader.error)
    }
</script>
</body>
</html>

URL.createObjectURL

该方法用于创建一个包含指定对象的临时url,这个url的生命周期会和创建他的这个窗口的生命周期绑定，如果创建他的窗口被关闭了,那么这个url也就会失效。

一般来说,都会将File对象或者Blob对象作为参数传入该函数,并且让这个临时url来代表这些对象。

以下是一个案例:该案例根据用户传入的图片文件,来生成一个对应的临时url,并将临时url作为src传给img标签

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<input type="file" id="file">
<img  id="ig">
<script>
    let file = document.getElementById("file")
    let ig = document.getElementById("ig")
    file.addEventListener("change", (e) => {
        let fileList=e.target.files
        //先获取一份文件
        //这里获取的才是File对象
        let file = fileList[0]
        //因为file也是Blob对象,所以直接传入即可
        ig.src=URL.createObjectURL(file)
    })
</script>
</body>
</html>

总结 

到此这篇关于Js中FileReader相关操作方法的文章就介绍到这了,更多相关Js FileReader相关操作内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文