javascript - Comment prévisualiser les images téléchargées?

Question

Semblable à ce type de téléchargement d'images, vous pouvez également prévisualiser l'affichage. Comment dois-je écrire le frontal ? Pouvez-vous me fournir un code similaire ? Merci

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

J'ai déjà écrit un aperçu d'une image de produit d'un centre commercial. L'idée est très simple, je ne sais pas si cela vous sera utile :
1. L'image téléchargée doit afficher une petite vignette sur la page Web ; . Dans les coulisses (nous étions en arrière-plan, vous pouvez également penser à d'autres moyens) pour stocker deux images, une petite vignette et une grande image haute définition prévisualisée
3. Lorsque vous cliquez sur la petite vignette, utilisez une boîte modale pour ; afficher la grande image haute définition.

Answer 4

Deux démos : cliquez sur l'événement https://github.com/treeandgra...
Picture drag https://github.com/treeandgra...