从input type =“file”获取缩略图

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还包括演示（已实施的FileReader API）和一个进度条，以及看看。