从输入类型=＆＃34;文件＆＃34;获取缩略图

Question

我正在构建一张照片上传者。当用户从<input type="file">

中选择照片时

我使用 jquery 将所选文件从用户提交到我的服务器，服务器将该图像保存到磁盘并制作缩略图。

服务器将缩略图的URL返回给客户端。

然后 jquery 将图像显示给用户。那是客户/服务器。

现在，我可以从用户显示所选文件的缩略图而无需将其发布到服务器吗？

（就像Facebook照片上传者，我们无需点击预览查看所选照片的​​缩略图.Facebook为我们做了）

Answer 1

您可以使用FileReader API，请参阅this answer的演示：

var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);

oFReader.onload = function (oFREvent) {
    document.getElementById("uploadPreview").src = oFREvent.target.result;
};

Answer 2

是的，您只能使用现代浏览器支持它 您正在寻找FileReader

查看此quick tutorial，其中还包括演示（Implemented FileReader API）和进度条。