我目前正在设计一个小型网页,让您使用HTML5中的dropzone将png文件上传到ftp服务器。当用户将有效图像放入dropzone时,我想在<img ... />
标签内显示图像。我得到了dropzone的javascript代码,并试图使用MYPICTUREID.src = file.name;
来更改src属性。这是行不通的,因为file.name只给你名字,而不是整个路径。从我读到的是,由于安全限制,您无法获取用户设备上本地文件的路径。什么是为用户创建预览的最佳方式?HTML5:在img标签中显示图像dropzone丢失
0
A
回答
1
我发现了一个简单的解决问题的方法:使用_URL.createObjectURL(file)
可以生成上传的文件pathes
。
这其实只是两行:
var _URL = window.URL || window.webkitURL;
_URL.createObjectURL(file);
0
您可以使用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>
相关问题
- 1. <img>标签不显示图像
- 2. HTML5视频标签不显示图像
- 3. 当在img标签中使用外部图像时不显示
- 4. 如何在img标签中显示图像?
- 5. 图像不显示在Firefox中的HTML img标签
- 6. 从mysql blob检索图像,并在img标签中显示
- 7. 图像不显示在img标记
- 8. 图像没有显示在莲花笔记img标签?
- 9. 如何在锚标签中显示img?
- 10. HTML img标签不显示图片
- 11. Dropzone在上传前显示图标
- 12. 在.php文件中使用html img标签显示徽标等图像
- 13. 在标签中显示图像
- 14. 显示标签:如何使用显示标签显示图像
- 15. img src标记不显示图像
- 16. HTML电子邮件 - 在img标签Outlook 2007中边界丢失
- 17. 使用html5的“img”标签
- 18. HTML5 img标签尺寸
- 19. 图像无法显示使用img标签inhtml
- 20. 如何获取img alt标签并将图像显示为html?
- 21. 为什么img标签只显示图像的一半?
- 22. DOMPDF和img标签,图像不会显示
- 23. 在textview中显示图像与img html
- 24. asp.net图像标签显示图像
- 25. HTML5视频标签显示
- 26. 不显示标签栏图像图标
- 27. HTML5 longdesc标签图像
- 28. 在View中使用img标签来显示静态图片
- 29. 通过AJAX添加图像路径到img标签的src显示图像
- 30. 试图在Laravel 5.1中使用dropzone显示图像
如果你有兴趣,http://dropzonejs.com已经这样做真的很好 –
这确实是很不错的,但我有我不得不非常具体的布局在此页面上使用,并且以正确的方式进行配置将非常耗时。但这似乎是一个非常有趣的项目。 – Nerethar