js-读取拖放文件

最新推荐文章于 2022-11-10 17:34:32 发布

莫兮是我

最新推荐文章于 2022-11-10 17:34:32 发布

阅读量723

点赞数

分类专栏：前端 JS WEB 文章标签： js

本文链接：https://blog.csdn.net/u013362192/article/details/114994617

版权

前端同时被 3 个专栏收录

67 篇文章 0 订阅

订阅专栏

59 篇文章 0 订阅

订阅专栏

WEB

50 篇文章 1 订阅

订阅专栏

js-读取拖放文件目录

文章目录

前言
推荐阅读
效果展示
代码展示
- `index.html`
- `main.js`

前言

H5拖放API和File API结合，创建文件信息的功能
drop和event.dataTransfer.files

效果展示

在这里插入图片描述

代码展示

`index.html`

<!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>
        #droptarget{
            background-color: aqua;
            width: 400px;
            height: 400px;
        }
    </style>
</head>
<body>
    <div id="droptarget"></div>
    <div id="output"></div>
    <script src="main.js"></script>
</body>
</html>

`main.js`

let dropTarget = document.getElementById('droptarget');

function handleEvent(event) {
    let info = '',
        output = document.getElementById('output'),
        files,
        i,
        len;
    event.preventDefault();

    if(event.type == 'drop'){
        files = event.dataTransfer.files;
        i = 0;
        len = files.length;

        while(i < len){
            info += `${files[i].name} (${files[i].type}, ${files[i].size} bytes)<br />`;
            i++;
        }
        output.innerHTML = info;
    }
}

dropTarget.addEventListener('dragenter', handleEvent);
dropTarget.addEventListener('dragover', handleEvent);
dropTarget.addEventListener('drop', handleEvent);

莫兮是我

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js-读取拖放文件

js-读取拖放文件目录文章目录前言推荐阅读效果展示代码展示`index.html``main.js`前言H5拖放API和File API结合，创建文件信息的功能drop和event.dataTransfer.files推荐阅读《JS 高级程序设计》效果展示代码展示index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &l
复制链接

扫一扫