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);