js-拖放文件识别

最新推荐文章于 2023-02-19 12:58:34 发布

莫兮是我

最新推荐文章于 2023-02-19 12:58:34 发布

阅读量273

点赞数

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

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

版权

前端同时被 3 个专栏收录

67 篇文章 0 订阅

订阅专栏

59 篇文章 0 订阅

订阅专栏

WEB

50 篇文章 1 订阅

订阅专栏

js-拖放文件识别目录

文章目录

前言
代码展示

前言

Chrome是唯一支持文件系统API的浏览器
实现了Drag Enter和Drag Over事件的反应
通过FileSystem API在文件系统上申请5 MB空间

不足：

仅在Chrome实现

代码展示

<!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>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script src="drag.js"></script>
</body>
</html>

// main.js
let canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d');

// 阻止浏览器的默认处理
canvas.addEventListener('dragenter', event => {
    event.preventDefault();

    event.dataTransfer.effectAllowed = 'copy';
}, false);

canvas.addEventListener('dragover', event => {
    event.preventDefault();    
}, false);

window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;

canvas.addEventListener('drop', event => {
    let file = event.dataTransfer.files[0];

    window.requestFileSystem(window.TEMPORARY, 5*1024*1024, fs => {
        fs.root.getFile(file.name, { creaye: true },
            fileEntry => {
                fileEntry.createWriter(writer => {
                    writer.write(file);
                });

                alert(`success: ${fileEntry.toURL()}`);
            },
            err => {
                alert(err.code);
            }
            );
    },
        err => alert(err.code)
    );
}, false);

莫兮是我

关注

0
点赞
踩
0

收藏

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

js-拖放文件识别目录文章目录前言代码展示前言Chrome是唯一支持文件系统API的浏览器实现了Drag Enter和Drag Over事件的反应通过FileSystem API在文件系统上申请5 MB空间不足：仅在Chrome实现代码展示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-
复制链接

扫一扫