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.jsorFileReader API

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.

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