HTML5:在 img 标签中显示放置在 dropzone 中的图像 [英] HTML5: Display images dropped in dropzone in img tag

问题描述

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

I'm currently designing a small webpage that let's you upload png files to a ftp server using a dropzone in HTML5. When a user does drop an valid image into the dropzone, I would like to present the image within a <img ... /> tag. I got the javascript code for the dropzone, and I tried to change the src attribute by using MYPICTUREID.src = file.name;. This does not work since file.name brings you just the name, not the entire path. From what I read is that you can't obtain the path to the local file on the users device due to safety restrictions. What would be the best way to create a preview for a user?

推荐答案

我找到了一个简单的问题解决方案:

I found a simple solution to the problem:

使用 _URL.createObjectURL(file) 你可以为上传的文件生成路径.

using _URL.createObjectURL(file) you can generate pathes for the uploaded files.

这实际上只是两行:

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

这篇关于HTML5:在 img 标签中显示放置在 dropzone 中的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！