Question

我试图在我的网站上创建一个简单的拖放功能来选择文件。我跟着this tutorial来实现它。我复制并粘贴了代码，但它没有用。

我在chrome和Internet Explorer上尝试过它们，它们都有相同的结果，即它会带来一个带有图像的新页面。我想让它获取文件路径，就像从常规input type="file"上传它一样。

然后我在JSFiddle上尝试了它，它适用于JSFiddle。如何在浏览器中使用它？这是link to the files。

代码段：

＆＃13;

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);

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

问题是您的脚本在DOM加载之前正在执行。最简单的解决方法是将引用<script>的{{1}}代码移至filedrag.js的底部。

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

drop_zone

拖动不起作用

1 个答案: