Html5 简单拖拽读取文件

最新推荐文章于 2025-01-09 07:28:32 发布

转载最新推荐文章于 2025-01-09 07:28:32 发布 · 2.1k 阅读

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5bf6c2546fb9a049e129d929

本文详细介绍了HTML5中实现文件拖拽上传的方法，包括监听dragenter、dragleave、dragover、drop等事件，以及使用FileReader读取文件的各种方式，如text、DataURL、ArrayBuffer和BinaryString。

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

html5 拖拽需要监听如下事件

ondragenter 拖拽进入
ondragleave 拖拽离开
ondragover 悬停
ondrop 松手

element添加事件

oDiv.addEventListener("dragenter",function(),false);
oDiv.addEventListener("dragleave",function(),false);
oDiv.addEventListener("dragover",function(ev){ ev.preventDefault();//取消事件的默认动作，防止浏览器打开文件 },false);
oDiv.addEventListener("drop",function(){ ev.preventDefault();//取消事件的默认动作，防止浏览器打开文件 },false);

文件读取

let reader = new FileReader() ;
文件读取主要事件

reader.onload = function(){}; //文件读取完调用
reader.onerror = function(){}; //文件读取失败
reader.result //文件读取到的结果

文件读取的方式

reader.readerAsText(oFile) 读取文本
reader.readerAsDataURL(ofile) base64 --图片
reader.readerAsArrayBuffer(ofile) 包含一个 ArrayBuffer 对象以表示所读取文件的数据不实用
reader.readerAsBinaryString(ofile) 读取文件二进制的文本形式数据用于上传

代码实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文件拖拽</title>
    <style>
        #div1 {
            width: 500px;
            height: 500px;
            background: #cccccc;
            border: 1px solid #000000;
            text-align: center;
            line-height: 500px;
        }
    </style>
    <script>
        window.onload = function () {
            var div1 = document.getElementById("div1");
            //拖拽进入
            div1.addEventListener("dragenter", function () {
                div1.innerHTML = "请松手" ;
            }, false);
            //拖拽离开
            div1.addEventListener("dragleave", function () {
                div1.innerHTML = "拖到这里上传" ;
            }, false);
            //悬停
            div1.addEventListener("dragover", function (ev) {
                ev.preventDefault();//取消事件的默认动作，防止浏览器打开文件
            }, false);
            //松手
            div1.addEventListener("drop", function (ev) {
                ev.preventDefault();//取消事件的默认动作。
                let fileReader = new FileReader() ;
                let file = ev.dataTransfer.files[0] ;
                fileReader.onload = function(){
                    alert("成功"+this.result);
                }
                fileReader.onerror = function(){
                    alert("读取失败");
                }
                fileReader.readAsText(file) ;
            }, false);

        }
    </script>
</head>

<body>
    <div id="div1">拖到这里上传</div>
</body>
</html>
复制代码

转载于:https://juejin.im/post/5bf6c2546fb9a049e129d929