FileReader对象和拖放事件

本文深入讲解了FileReader API的功能和用法,包括如何使用FileReader对象读取本地文件,实现文本和图片的预览,以及如何处理拖放事件来读取文件。探讨了FileReader的异步读取机制和不同状态码的含义。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

FileReader

官方概念:FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。

FileReader通过异步的方式读取文件内容,结果均是通过事件回调获取。

文本预览案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="file" id="file">
    <h1>文件预览</h1>
    <div id="content"></div>
    <script>
        let reader=new FileReader();//FileReader对象是用来读取文件的
        let file=document.querySelector('#file');
        let content=document.querySelector('#content');
        file.onchange=function(ev){
            // console.log(ev.target.files[0]);
            reader.readAsText(ev.target.files[0]);
            //文件的读写都是需要时间的
            reader.onload=function(ev){//文件读取结束获得数据
                // console.log(ev.target.result);
                content.innerHTML=ev.target.result;
            }
        }
    </script>
</body>
</html>

在这里插入图片描述
readAsText 方法可以将 Blob 或者 File 对象转根据特殊的编码格式转化为内容(字符串形式)

这个方法是异步的,也就是说,只有当执行完成后才能够查看到结果,如果直接查看是无结果的,并返回undefined

也就是说必须要挂载 实例下的 onload 或 onloadend 的方法处理转化后的结果

当转化完成后, readyState 这个参数就会转换 为 done 即完成态, event(“loadend”) 挂载的事件会被触发,并可以通过事件返回的形参得到中的 FileReader.result 属性得到转化后的结果

FileReader.readyState 有三种状态码

| 常量名 |  值| 描述 |
| EMPTY |  0| 还没有加载任何数据. |
| LOADING | 1| 数据正在被加载. |
| DONE |  2| 已完成全部的读取请求. |

图片预览案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <input type="file" id="file">
    <div id="showimg"></div>
    <script>
        $(function(){
            var reader=new FileReader();
            $('#file').on('change',function(ev){
                reader.readAsDataURL(ev.target.files[0]);
                reader.onload=function(){
                    // console.log(reader.result);//reader.result是图片的路径
                    $('#showimg').append('<img src="'+reader.result+'"></img>');
                }
            })
        })
    </script>
</body>
</html>

readAsDataURL 方法会读取指定的 Blob 或 File 对象。读取操作完成的时候,readyState 会变成已完成DONE,并触发 loadend 事件,同时 result 属性将包含一个data:URL格式的字符串(base64编码)以表示所读取文件的内容。
在这里插入图片描述

拖放事件

在拖动目标上触发事件 (源元素):
ondragstart - 用户开始拖动元素时触发
ondrag - 元素正在拖动时触发
ondragend - 用户完成元素拖动后触发

释放目标时触发的事件:
ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop - 在一个拖动过程中,释放鼠标键时触发此事件

外部拖放图片至选定框案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        #box {
            width: 500px;
            height: 200px;
            margin: 0 auto;
            text-align: center;
            line-height: 200px;
            border: 5px dashed darkcyan;
            user-select: none;
        }
        
        #showimg {
            width: 500px;
            margin: 0 auto;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div id="box">
        请将图片拖动到此处
    </div>

    <div id="showimg"></div>
    <script>
        $(function(){
            //dragover事件 会在拖拽源元素的鼠标指针在目标元素内移动时持续触发
            $(document).on('dragover',function(ev){
                ev.preventDefault();
            })

            //drop 放置事件
            $('#box').on('drop',function(ev){
                //注意:浏览器存在默认行为;当图片拖拽放置至指定框内,浏览器会跳转至图片页面
                ev.preventDefault();
                //jquery对event进行了二次封装,需要找到原生事件 originalEvent
                // console.log(ev.originalEvent.dataTransfer.files);
                let files=ev.originalEvent.dataTransfer.files;
                let reader=new FileReader();
                reader.readAsDataURL(files[0]);
                
                reader.onload=function(){
                    $('#showimg').append('<img src="'+reader.result+'"></img>');
                }
            })
        })
    </script>
</body>
</html>

注意
浏览器存在默认行为;当图片拖拽放置至指定框内,浏览器会跳转至图片页面。
jquery对event进行了二次封装,需要找到原生事件 originalEvent。
在这里插入图片描述

页面内部拖拽图片案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 500px;
            height: 500px;
            border: 1px solid black;
            float: left;
            overflow: hidden;
        }
        
        img {
            width: 200px;
            float: left;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <img src="./a.png" id="pic">
    <script>
        window.onload=function(){
            let box=document.querySelector('#box');
            let pic=document.querySelector('#pic');

            pic.ondragstart=function(ev){
                // console.log(ev.dataTransfer);
                //设置了一个id
                ev.dataTransfer.setData('id',ev.target.id);
            }

            box.ondrop=function(ev){
                //获取了一个id,通过document.getElementById选择到这个元素,再将这个元素放入box里
                ev.target.appendChild(document.getElementById(ev.dataTransfer.getData('id')));
            }

            box.ondragover=function(ev){
                ev.preventDefault();//阻止默认行为
            }
        }
    </script>
</body>
</html>

在这里插入图片描述
从边框外拖放至边框内

Dragable(拖拽属性)是H5新增的全局属性,是布尔类型;
图片默认的dragable属性为true,可拖拽的

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值