文章目录

  • js之文件信息读取（FileReader）
  • 获取文件相关信息的两种方式
  • 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>