javascript - Wie kann ich hochgeladene Bilder in der Vorschau anzeigen?

Question

Ähnlich wie bei dieser Art des Hochladens von Bildern können Sie auch eine Vorschau der Anzeige anzeigen. Gibt es einen ähnlichen Code, den Sie mir zur Verfügung stellen können? Vielen Dank

Answer 1

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]);//读取文件
};

Answer 2

web uploader.js或FileReader API

Answer 3

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

Answer 4

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