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

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

来源

2016-07-22 Nerethar

如果你有兴趣，http://dropzonejs.com已经这样做真的很好 –

这确实是很不错的，但我有我不得不非常具体的布局在此页面上使用，并且以正确的方式进行配置将非常耗时。但这似乎是一个非常有趣的项目。 – Nerethar

我发现了一个简单的解决问题的方法：使用_URL.createObjectURL(file)可以生成上传的文件pathes

。

这其实只是两行：

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

来源

2016-07-22 15:53:22 Nerethar

您可以使用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>

来源

2016-07-22 15:55:03

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

回答

相关问题