HTML5：在img标签中显示dropzone中丢弃的图像

Question

我目前正在设计一个小网页，让您使用HTML5中的dropzone将png文件上传到ftp服务器。当用户确实将有效图像放入dropzone时，我想在<img ... />标记内显示图像。我得到了dropzone的javascript代码，我尝试使用MYPICTUREID.src = file.name;更改src属性。这不起作用，因为file.name只为您带来名称，而不是整个路径。从我读到的是，由于安全限制，您无法获得用户设备上本地文件的路径。为用户创建预览的最佳方法是什么？

Answer 1

我找到了解决问题的简单方法：

使用_URL.createObjectURL(file)您可以为上传的文件生成修补程序。

这只是两行：

var _URL = window.URL || window.webkitURL;
_URL.createObjectURL(file);

Answer 2

您可以使用FileReader.readAsDataURL来完成此操作。

var dropbox = document.getElementById("dropbox");
dropbox.addEventListener("dragenter", dragenter, false);
dropbox.addEventListener("dragover", dragover, false);
dropbox.addEventListener("drop", drop, false);

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

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

function drop(e) {
  e.stopPropagation();
  e.preventDefault();

  var dt = e.dataTransfer,
      file = dt.files[0],
      img = document.createElement('img'),
      reader = new FileReader();
  
  dropbox.appendChild(img);

  reader.onload = function(e) {
    img.src = e.target.result;
  };
  
  reader.readAsDataURL(file);
}

#dropbox {
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

<div id="dropbox"></div>