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

Question

当用户上传图像时,有没有办法可以加载图像客户端并在将其上传到服务器之前首先显示给他们？最好只使用javascript/jquery,但使用flash也是可以接受的.

Answer 1

可以使用FileReaderHTML5中定义的新界面并在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属性设置为此数据字符串.

在这里查看一个工作示例.仅限Firefox.