javascript - How to preview uploaded images?

Question

Similar to this kind of uploading pictures, you can also preview the display. How should I write the front end? Is there any similar code that you can provide me with? Thanks

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 or FileReader API

Answer 3

I have written a preview of a mall product image before. The idea is very simple. I don’t know if it will be helpful to you:
1. The uploaded image must display a small thumbnail on the web page;
2. Backstage (we were In the background, you can also think of other ways) to store two pictures, a small thumbnail and a previewed high-definition large picture;
3. When you click on the small thumbnail, use a modal box to display the large high-definition picture.

Answer 4

Two demos: Click event https://github.com/treeandgra...
Picture drag https://github.com/treeandgra...