Javascript HTML5：在img标签中显示放置在dropzone中的图像

我目前正在设计一个小网页，让您可以使用HTML5中的dropzone将png文件上传到ftp服务器。当用户将有效图像放入dropzone时，我希望在

MYPICTUREID.src=file.name。这不起作用，因为file.name只提供名称，而不是整个路径。据我所知，由于安全限制，您无法获取用户设备上本地文件的路径。为用户创建预览的最佳方式是什么

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

使用
\u URL.createObjectURL（文件）
可以为上载的文件生成路径

这实际上只是两行：

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

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


var-dropbox=document.getElementById（“dropbox”）；
dropbox.addEventListener（“dragenter”，dragenter，false）；
dropbox.addEventListener（“dragover”，dragover，false）；
dropbox.addEventListener（“drop”，drop，false）；
功能性疏水剂（e）{
e、 停止传播（）；
e、 预防默认值（）；
}
函数dragover（e）{
e、 停止传播（）；
e、 预防默认值（）；
}
功能下降（e）{
e、 停止传播（）；
e、 预防默认值（）；
var dt=数据传输，
file=dt.files[0]，
img=document.createElement（'img'），
reader=newfilereader（）；
dropbox.appendChild（img）；
reader.onload=函数（e）{
img.src=e.target.result；
};
reader.readAsDataURL（文件）；
}
#dropbox{
宽度：300px；
高度：300px；
边框：1px纯黑；
}
如果您感兴趣，已经做得非常好了这确实非常好，但是我在这个页面上有一个非常具体的布局，我不得不使用它，并且以正确的方式配置它会非常耗时。但这似乎是一个非常有趣的项目。