HTML5文件操作+上传+文件拖拽（案例）

最新推荐文章于 2023-12-26 15:24:14 发布

M_Snow

最新推荐文章于 2023-12-26 15:24:14 发布

阅读量256

点赞数 1

文章标签： html5 前端 html

原文链接：https://www.cnblogs.com/songsu/p/17904002.html

版权

js有两种机制：事件机制、io机制
文件操作对象：
Blob 通过二进制原始数据读取

file 读取单个文件对象

fileList 读取多个文件对象

fileReader 读取文件信息

file和fileList 的属性方法
1、name 名称

2、size 文件字节长度

3、type 文件类型

4、lastModified 最后修改日期

获取单个文件:

<input type="file" name="" id="file" >

var file = document.getElementById("file").files[0];

获取多个文件：

<input type="file" name="" id="file" multiple>

var file = document.getElementById("file").files;

fileReader属性和方法

readAsBinaryString(file) 以二进制读取

readAsText(文件,"utf-8") 以某种字符编码读取

readAsDataURL(file) 获取一个对象路径,读取对象,

abort() 中断读取

reslut 获取读取对象的信息

loaded() 字节数

slice(开始位置，步长) 分段读取方法

fileReader事件
onloadstart 读取文件开始时触发

onprogress 读取文件过程中触发

onload 读取文件成功完成时触发

onabort 读取文件中断时触发

onloadend 读取文件完成时触发 (无论成功与否)

onerror 获取错误事件信息

文件拖拽
如果要实现文件拖拽，必须在标签里设置拖拽属性 draggable = true

例如：

拖拽事件

ondragstart：鼠标悬停到被拖拽元素上，开始触发;
 
ondragEnter：拖拽元素进入目标元素，开始触发;
 
ondragover：拖拽元素在目标元素上移动时触发;
 
ondrop：拖拽元素进入目标元素，并且鼠标松开时触发;
 
ondragend：拖拽完成时触发

属性和方法

#### getData() 获取数据
 
#### setData(类型，内容) 设置数据
 
#### preventDefault() 启动元素放置事件
 
#### dropEffect() 被拖动元素的权限设置
 
  none 不能放置在目标元素上
 
  move 可以在目标元素上移动
 
  copy 拖拽元素允许被复制到目标元素里
 
  link 可以获得拖拽元素地址
 
#### effectAllowed() 允许拖动的效果
 
  none 不允许有任何行为
 
  copy 只允许复制
 
  move 只允许移动
 
  link 只允许打开链接
 
  copylink 复制和打开链接
 
  copymove 复制和移动
 
  linkmove 移动和打开链接
 
  all 所有都允许

操作案例：

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            border: 1px solid black;
            margin: 20px;
        }
        #file{
            margin: 30px;
        }
        .container{
            display: flex;
            border: none;
        }
        #show,#del{
            width: 300px;
            height: 200px;
            display: flex;
            flex-direction: column;
            text-align: center;
        }
        #show img{
            margin-left: 50px;
            width: 200px;
            height: 100px;
        }
        #box{
            width: 800px;
            height: 400px;
        }
        #box img{
            width: 200px;
            height: 100px;
        }
 
    </style>
</head>
<body>
    <input type="file" id="file" />
    <button id="btn" onclick="fun()">上传</button>
    <div class="container">
        <div id="show"><h4>显示上传图片</h4></div>
        <div id="del"><h4>垃圾桶</h4></div></div>
    </container>
    <div id="box"></div>
    <script>
        function fun() {
            show().then((value)=>{
                drag(value);
            })
        }
        function show(){
            return new Promise(resolve => {
                var file = document.getElementById("file").files[0];
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function(e){
                    var img = new Image();  
                    img.src = this.result;
                    img.setAttribute("id","img")
                    img.setAttribute("draggable","true")
                    document.getElementById("show").appendChild(img);
                    resolve(img);
                }
            })
        }
 
        function drag(img){
            return new Promise(resolve => {
            var box = document.getElementById("box");
            var del = document.getElementById("del"); 
            img.ondragstart = function (e) {
                e.dataTransfer.setData("id", e.target.id);
                e.dataTransfer.dropEffect = "copy";
            };
            box.ondragover = function (e) {
                e.preventDefault(); //允许其他元素放置
            };
            box.ondrop = function (e) {
                e.dataTransfer.effectAllowed = "all"
                var id = e.dataTransfer.getData("id");
                var img = document.getElementById(id);
                e.target.appendChild(img);
            };
            del.ondragover = function (e) {
                e.preventDefault(); 
            };
            del.ondrop = function (e) {
                e.dataTransfer.effectAllowed = "all"
                var id = e.dataTransfer.getData("id");
                var img = document.getElementById(id);
                var box = document.getElementById("box");
                box.removeChild(img);
            }
            resolve();
        })
        }
        
 
    </script>
</body>
</html>

参考文章：http://blog.ncmem.com/wordpress/2023/12/15/html5%e6%96%87%e4%bb%b6%e6%93%8d%e4%bd%9c%e4%b8%8a%e4%bc%a0%e6%96%87%e4%bb%b6%e6%8b%96%e6%8b%bd%ef%bc%88%e6%a1%88%e4%be%8b%ef%bc%89/
欢迎入群一起讨论

在这里插入图片描述

M_Snow

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5文件操作+上传+文件拖拽（案例）

参考文章：http://blog.ncmem.com/wordpress/2023/12/15/html5%e6%96%87%e4%bb%b6%e6%93%8d%e4%bd%9c%e4%b8%8a%e4%bc%a0%e6%96%87%e4%bb%b6%e6%8b%96%e6%8b%bd%ef%bc%88%e6%a1%88%e4%be%8b%ef%bc%89/file和fileList 的属性方法。js有两种机制：事件机制、io机制。fileList 读取多个文件对象。file 读取单个文件对象。
复制链接

扫一扫