javascript - Twitter个人资料图片 uploader 如何在客户端显示图片预览

Question

我们最近使用Fine Uploader向我们的网站添加了图像上传和裁剪功能。 ;将一组 javascript 库与 HTTP 处理程序混合在一起。

它运行良好，但是对于较大的图像，客户端被迫:

1. 稍等片刻，直到使用 HTTP 处理程序上传图像
2. 再次下载图像，以便可以与 JCrop 一起使用
3. 图像以完整尺寸下载，然后由 JCrop 在客户端调整为较小的图像。

我注意到在 Twitter 上为您的个人资料选择图像会立即显示该图像；显然没有服务器端交互。

有谁知道twitter如何实现客户端查看图像而不将其上传到服务器；或者对平滑上述过程有什么建议吗？

Answer 1

大概是这样

http://jsfiddle.net/dmZTm/

var URL = window.URL || window.webkitURL;

$("input").change(function() {
    var file = this.files && this.files[0];

    if (file) {
        var src = URL.createObjectURL(file);
        $("<img>", {
            src: src
        }).appendTo("body");
    }


});​