js之文件信息读取篇高级基础

js之文件信息读取（FileReader）

首先这里面会讲一些知识点

• bolb 对象
• FileReader对象

   		let blob = new Blob(['heewwekgewgwer'], { type: 'text/plain' })let blob1 = blob.slice(0, 6, 'text/plain')let reader = new FileReader()reader.readAsText(blob1)// console.log(reader);reader.onload = (res) => {console.log(res.target.result)//heewwe}

file文件是特殊的bolb对象是计算机用于存储2进制的一个信息，然而这个信息只能通过FileReader对象来读取，FileReader常用的一些方法

方法	描述
readAsArrayBuffer(file)	读取文件或Blob作为数组缓冲区。 一种用例是将大文件发送给服务人员。,常用于分片传输
readAsBinaryString(file)	以二进制字符串形式读取文件
readAsText(file, format)	以USVString readAsText(file, format)读取文件(几乎像一个字符串)，并且可以指定可选格式。常用于读取txt文件
readAsDataURL(file)	这将返回一个URL，您可以在其中访问文件的内容，它是Base64编码的，可以发送到您的服务器,常用于读取上传图片，视频等需要url的，src的

---

获取文件相关信息的两种方式

• 第一种使用input 标签在上传的时候change事件中 读取当前的input.files[0]

	  <input type="file"><script>let input = document.querySelector('input')input.addEventListener('change', function () {let reader = new FileReader()reader.readAsText(input.files[0]);console.log(reader);reader.onload = (res) => {console.log(res.target.result)}})</script>

• 第二种方式通过拖拽的方式获取里面的信息

 	<div id="app"></div><script>let app = document.querySelector('#app')console.log(app);app.ondragover = function (e) {e.preventDefault();}app.ondrop = function (e) {e.preventDefault()const files = e.dataTransfer.filesconsole.log(files);}</script>

js原生拖拽事件

<div draggable="true|false|auto"> //draggable true可拖拽，false 不可拖拽 ， auto跟随浏览器特性

dataTransfer获取拖拽信息

属性	描述
files	其他属性返回和放置相关的所有文件
types	属性使用数组的形式返回当前注册格式
effectAllowed	此属性通知浏览器当前可被用户选用的操作
dropEffect	拖放的操作类型，决定了浏览器如何显示鼠标形状
items	属性返回所有项与相关格式所有文件

拖拽元素与区域元素还有一些共享数据方法api

eg ：e.dataTransfer.setDat( ‘data’,‘我是要储存的数据’ ) //在dataTransfer对象中注册此对象（data）
e.dataTransfer.setDat( ‘text’,‘我是要储存的text数据’ )
e.dataTransfer.getData( ‘data’ )
e.dataTransfer.getData( ‘text’ )

方法	使用规则
setData(type,data)	用于声明发送的数据与类型
getData(type)	用于指定类型的data
clearData(type)	清除指定类型的数据，不填删除所有
setDragImage(ele,x,y)	使用图像元素为参考，同时u使用此参数作为拖动返回的图像
addElement(element)	提供一个页面元素作为参考，同时使用参数作为拖放反馈图像

ondragover ,ondrop这两个事件在使用的时候必须禁止默认行为

在拖放的过程中会触发以下事件：

• 在拖动目标上触发事件 (被拖元素):

方法	使用说明
ondragstart	用户开始拖动元素时触发
ondrag	元素正在拖动时触发
ondragend	用户完成元素拖动后触发

• 释放目标时触发的事件:(拖放区域元素)

方法	使用说明
ondragenter	当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover	当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave	当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop	在一个拖动过程中，释放鼠标键时触发此事件

完整案例
以下是简易的拖动图片到另一个元素里面，细节自己调整

 <style>#app {width: 200px;height: 200px;border: 1px solid red;}.bos {width: 200px;height: 200px;border: 1px solid blue;}img {width: 100px;}</style><div id="app"></div><div class="bos"> <img src="./img/a.jpg" alt=""></div><script>let app = document.querySelector('#app')let bos = document.querySelector('.bos')let img = document.querySelector('img')//这个地方单纯为了实现修改小手的样式bos.ondragstart = function (e) {//设置拖拽的背景图 就是把鼠标小手换成背景图e.dataTransfer.setDragImage(img, 10, 10)}app.ondragover = function (e) {e.preventDefault();}app.ondrop = function (e) {e.preventDefault()// 获取拖拽时候的文件内容const files = e.dataTransfer.files[0]let reader = new FileReader()//读取文件url地址reader.readAsDataURL(files)reader.onload = res => {// 设置背景图 ，你也可以用cavans去画app.style.backgroundImage = `url(${res.target.result})`}}</script>