javascript - 将图像从桌面拖放到浏览器，而不是通过输入进行搜索

Question

老实说，这超出了我的理解范围，所以任何帮助或指导都将非常有用。

我有一个非常基本的 input 表单，允许我从本地文件夹中选择多个图像并将它们显示在页面上以及显示文件类型/名称/大小等信息。

我希望能够将图像拖放到页面中，而不是每次都手动搜索图像。这就是我被困的地方。我不知道我需要谷歌什么来获得我想要的结果。我已经看到很多关于 file API 的东西，但我真的不太理解。

这是我目前所拥有的: https://jsfiddle.net/umx1vpwy/

如有任何帮助，我们将不胜感激!

代码:

function readImage(file) {

     var reader = new FileReader();
     var image = new Image();

     reader.readAsDataURL(file);
     reader.onload = function(_file) {
       image.src = _file.target.result; // url.createObjectURL(file);
       image.onload = function() {
         var w = this.width,
           h = this.height,
           t = file.type, // ext only: // file.type.split('/')[1],
           n = file.name,
           s = ~~(file.size / 1024) + 'KB';
         $('#uploadPreview').append('<img src="' + this.src + '"> ' + w + 'x' + h + ' ' + s + ' ' + t + ' ' + n + '<br>');
       };
       image.onerror = function() {
         alert('Invalid file type: ' + file.type);
       };
     };

   }
   $("#choose").change(function(e) {
     if (this.disabled) return alert('File upload not supported!');
     var F = this.files;
     if (F && F[0])
       for (var i = 0; i < F.length; i++) readImage(F[i]);
   });

<input type="file" id="choose" multiple="multiple" />
<div id="uploadPreview"></div>

我只想说，浏览器兼容性应该不是问题，因为它只会用作 Chrome 或 Firefox 中的工具。

Answer 1

这应该有帮助:

var el = document.querySelector(YOUR SELECTOR);

function onDragEnter(e) {
    e.stopPropagation();
    e.preventDefault();
}

function onDragOver(e) {
    e.stopPropagation();
    e.preventDefault();
}

function onDragLeave(e) {
    e.stopPropagation();
    e.preventDefault();
}

function onDrop(e) {
    e.stopPropagation();
    e.preventDefault();
    setFiles(e.dataTransfer.files);
    return false;
}

el.addEventListener('dragenter', onDragEnter, false);
el.addEventListener('dragover', onDragOver, false);
el.addEventListener('dragleave', onDragLeave, false);
el.addEventListener('drop', onDrop, false);

function setFiles(files){
    //Here you have your files
}