Two ways that JavaScript implements picture previews

This article mainly introduces the JS implementation of the picture preview two ways, very good, with reference value, the need for friends can refer to the next

Considering the user experience, the image of the Web page before uploading the database, the first preview is a very necessary step, the first can give users a sense of security, the second to prevent the picture file problems and submit to the database, occupy storage resources.

There are two ways to implement previews: one is to use window. The Url.createobjecturl method generates a Blob object path for the selected picture data (value that can be barely understood as input), and the second is to get the FileReader reader.

So either way, you get the file data first, and the file data is obtained from the Files collection.

Way One:

The code is as follows:

<input type=file id= "INP" ><script> inp.onchange=function () {var file=this.files[0]//Get image data uploaded by input; var Img=new Image (); Url=window. Url.createobjecturl (file)//Get Bolb object path, can be used as a normal file path, assigned to SRC; Img.src=url; In fact, a code can be done, do not need to declare so many variables; Img.scr=window. Url.cteateobejecturl (This.files[0]); The IMG is then added to the page for a preview of the}<script>

Way two:

Use Filerader to read files. Can be divided into four steps, 1, create filereader to image; 2, call Readasdataurl method to read the file, 3, call the OnLoad event listener, we need to get the full data, but we do not know when the file is finished reading? , so the third step is required to listen, 4, through filerader to the result property like R to get read results.

The code is as follows:

<input type=file id= "INP" ><input type=file id= "INP" ><script>inp.onchange=function () {var read=new FileReader ()//create FileReader to image; Read.readasdataurl (This.files[0])//Call Readasdataurl method to read the file;  Read.onload=function () {   Url=read.result//get read results;   var img=new Image ();   Img.src=url;   P.appendchild (IMG); } }

The above is a small series to introduce you to the JS implementation of the picture preview of several ways, I hope that we have some help, if you have any questions please give me a message, small series will promptly reply to you. Thank you very much for the support of the Scripting House website!