FileReader对象和拖放事件

最新推荐文章于 2024-10-20 21:41:12 发布

原创最新推荐文章于 2024-10-20 21:41:12 发布 · 223 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#filereader #HTML5 drop drag 拖动元素位置交换

拖放事件、FileReader对象专栏收录该内容

1 篇文章

订阅专栏

本文深入讲解了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 有三种状态码

图片预览案例：

<!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>