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

Question

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

Answer 1

新的 FileReader 是可能的接口(interface)以 HTML5 定义，目前适用于 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);

文件加载后，您将可以通过数据 URL 方案访问其内容，例如:

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

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

See a working example here 。 仅限 Firefox。