Question

当用户上传图片时，有没有办法可以加载图片客户端并先将其显示给他们，然后再将其上传到服务器？最好只使用javascript / jquery，但使用flash也是可以接受的。

Answer 1

可以使用HTML5中定义的新FileReader界面，并且当前可以在Firefox上使用。

文件输入具有关联的files属性，该属性跟踪当前为该输入选择的文件列表。要显示此列表中的文件，请创建一个新的FileReader对象，初始化其onload事件处理程序，并将该文件作为数据URL读取。

// get the first file, foo is a file input field
var file = document.getElementById('foo').files[0];

// setup the reader and the load complete callback
var reader = new FileReader();
reader.onload = function(e) {
    var image = new Image();
    // string representing the image
    image.src = e.target.result;
    document.body.appendChild(image);
};

// read the file as a data url
reader.readAsDataURL(file);

加载文件后，您将可以访问数据网址方案中的内容，例如：

data:image/jpeg;base64,...aqHI7sNyPGFjdtQvFr/2Q==

创建一个新图像并将其src属性设置为此数据字符串。

See a working example here。 仅限Firefox 。

Answer 2

由于现有的安全限制，你可以在JavaScript中单独使用这种跨浏览器，但有一些Flash版本可用，here's one example（免费版本就是你所追求的）。

也有更多免费的Flash版本。

Answer 3

由于输入元素的File Object，File Reader和'files'属性，因此HTML 5可以实现这些目的。

有关详细信息，请参阅此处：http://demos.hacks.mozilla.org/openweb/＆amp; http://hacks.mozilla.org/2009/12/file-drag-and-drop-in-firefox-3-6/

示例（仅用于演示，需要FF 3.5+）：见这里：http://gist.github.com/536024

如果您想知道，File.url是全新的，有了它你不再需要将整个文件读入内存，并将整个DataUrl（数据：image / src，base64; DF15EDFE86 ..）分配给src属性。

Answer 4

嗯，<img>标记需要一条到图像的路径。该路径可以是Web上的某些内容，也可以是本地文件。到现在为止还挺好。诀窍是，如何告诉你的javascript本地系统的路径，所以它可以设置IMG SRC属性。

文件<input>标记的路径对于javascript不可用（作为安全预防措施---您不希望从您的系统中获取想要的页面上传文件）。

另一方面，如果您可以让用户在文本<input>字段中输入正确的文件路径名，那么应该可以。

有没有办法让用户在上传到服务器之前查看他们即将上传客户端的图像？

4 个答案: