javascript - twitters个人资料图片上传器如何在客户端显示图片预览

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");
    }


});​