这种上传图片预览怎么做?

类似于这种上传图片,还能预览显示的这种,前端应该怎么写,有没有类似的代码可以提供给我看看!谢谢
clipboard.png

阅读 3.1k
4 个回答
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.jsFileReader API

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题