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
}

Answer 2

您可以使用Dropzone JS：http://www.dropzonejs.com/

它完全符合您的要求，非常，非常可定制，轻量级和开源。

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

2 个答案: