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.files
            console.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>