javascript - 纯 JavaScript 将图像拖到浏览器

Question

我正在尝试取消 jQuery-fy 一个聪明的 piece of code ，但有点太聪明了。

目标是simple 。将图像从桌面拖动到浏览器。

在这次 unjQueryfication 过程中，我发现，你瞧，美元符号函数实际上是 implemented在 Chrome 和 Firefox 中。因此，即使不包含 jQuery，它也已经可以工作了。

这是我到目前为止想到的。我错过了什么？

var el = document.getElementById('holder');

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

function load_images(files) {
    var images = document.getElementById("images");
    files.map(function(file) {
        var reader = new FileReader();
        reader.onload = function(event) {
            if (file.type.match('image.*')) {
                var img = document.createElement('img');
                img.src = event.target.result;
                images.appendChild(img);
                reader.readAsDataURL(file);
            }}
    });
}

function onDrop(e) {
    e.stop_and_prevent();
    load_images(e.dataTransfer.files);
    return false;
}

el.addEventListener('dragenter', stop_and_prevent, false);
el.addEventListener('dragover', stop_and_prevent, false);
el.addEventListener('dragleave', stop_and_prevent, false);
el.addEventListener('drop', onDrop, false);

div#holder {
    border: 5px dashed #ccc;
    height:400px;
    width:400px;
    font-family:Verdana;
    text-align:center;
}

    <div id="holder">
        <p>Drag files here</p>
        <div id="images"></div>
    </div>

Answer 1

您可能想使用:

stop_and_prevent(e);

在您的放置处理程序中而不是当前的:

e.stop_and_prevent();

此外，由于 files 的类型为 FileList而不是 Array ，您将无法直接在其上使用 map() 。只需使用普通循环或 [].forEach.call() 即可。

您不需要阻止 dragleave 处理程序上的事件。

更新的代码:

var el = document.getElementById('holder');

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

function load_images(files) {
    var images = document.getElementById("images");
    [].forEach.call(files, function(file) {
      if (file.type.match('image.*')) {
        var reader = new FileReader();
        reader.onload = function() {
          var img = document.createElement('img');
          img.src = this.result;  //=reader.result, or use event.target.result
          images.appendChild(img);
        }
        reader.readAsDataURL(file);
      }
   });
}

function onDrop(e) {
    stop_and_prevent(e);
    load_images(e.dataTransfer.files);
    return false;
}

el.addEventListener('dragenter', stop_and_prevent);
el.addEventListener('dragover', stop_and_prevent);
el.addEventListener('drop', onDrop);

div#holder {
    border: 5px dashed #ccc;
    height:400px;
    width:400px;
    font-family:Verdana;
    text-align:center;
}

<div id="holder">
        <p>Drag files here</p>
        <div id="images"></div>
    </div>