var fr = new FileReader(),
    file = document.getElementById("file"),
    img = document.createElement("img");
file.onchange = function(e){
    fr.onload = function(e){
        var res = this.result;
        img.src = res;
        document.body.appendChild(img);//显示
    };
    
    fr.readAsDataURL(file.files[0]);//读取文件
};

web uploader.js或FileReader API

自己之前写过一个商城商品图片的预览，思路很简单，不知道对你有没有帮助：
1.上传上的图片，网页上肯定显示小的缩略图吧；
2.后台（我们当时是后台，你们也可以想想其他办法）存储两张图片，一张小的缩略图，一张预览的高清大图；
3.点击小的缩略图时，用模态框显示大的高清图。

两个demo:点击事件https://github.com/treeandgra...
图片拖拽的https://github.com/treeandgra...