Question

我正在尝试取消jQuery-fy聪明的piece of code，但这只是一个有点过于聪明的人。

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

在这个unjQueryfication期间，我发现，在Chrome和Firefox中，一个美元符号函数实际上是implemented。所以即使不包含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>

pure-JavaScript将图片拖到浏览器

1 个答案: