拖放不工作

Question

我正在尝试在我的网站中创建一个简单的拖放功能来选择文件。我跟着this tutorial 来实现它。我复制并粘贴了代码，它不起作用。

我在 chrome 和 internet explorer 上尝试过，它们都有相同的结果，即它会打开一个带有图像的新页面。我希望它获取文件路径，就像您从常规 input type="file" 上传时一样。

然后我在JSFiddle 上尝试了它，它在JSFiddle 中运行。我怎样才能让它在我的浏览器中工作？这是link to the files。

代码sn-p：

function handleFileSelect(evt) {
  evt.stopPropagation();
  evt.preventDefault();

  var files = evt.dataTransfer.files; // FileList object.

  // files is a FileList of File objects. List some properties.
  var output = [];
  for (var i = 0, f; f = files[i]; i++) {
    output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
      f.size, ' bytes, last modified: ',
      f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
      '</li>');
  }
  document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}

function handleDragOver(evt) {
  evt.stopPropagation();
  evt.preventDefault();
  evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
}

// Setup the dnd listeners.
var dropZone = document.getElementById('drop_zone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);

.example {
  padding: 10px;
  border: 1px solid #ccc;
  width: 50%;
  margin: auto;
}
#drop_zone {
  border: 2px dashed #bbb;
  border-radius: 5px;
  padding: 25px;
  text-align: center;
  font: 20pt bold'Vollkorn';
  color: #bbb;
  height: 100px;
}

<div class="example">
  <div id="drop_zone">Drop files here</div>
  <output id="list"></output>
</div>

Answer 1

问题是您的脚本在 DOM 加载之前正在执行。最简单的解决方法是将引用filedrag.js 的<script> 标记移动到body 的底部。

如果您想在文档头中保留filedrag.js，则需要等到DOM 完全加载后才能尝试引用drop_zone 等元素。既然您决定使用 jQuery，那么您可以这样做：

function handleFileSelect(evt) {
    evt.stopPropagation();
    evt.preventDefault();

    var files = evt.dataTransfer.files; // FileList object.

    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
        output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
        f.size, ' bytes, last modified: ',
        f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
            '</li>');
    }
    $('#list').innerHTML = '<ul>' + output.join('') + '</ul>';
}

function handleDragOver(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
}

// This is necessary or jQuery won't include the data property when an event is triggered
// It's recommended you use the native event listeners, as this method will add extra overhead.
$.event.props.push("dataTransfer");

// Setup the dnd listeners.
window.onload = function(e) {
    var dropZone = $('#drop_zone');
    dropZone.on('dragover', handleDragOver);
    dropZone.on('drop', handleFileSelect);
}