JS Implementation Front-End Learning User blueprint (picture upload preview)

Here set the <input type= "file" > Transparency to 0, and then overwrite the style you want, the main code is as follows:

<form id= "Assess-form" style= "Height:auto" > <textarea class= "assess-text" placeholder= "please input the relevant evaluation content" ></ textarea> <div class= "upload-img" > <div class= "Horizontal" ></div> <div class= "vertical" > </div> </div> <input class= "Upload-img-file" id= "file_input" type= "file" > <span class= " Upload-img-font "> Mobile Blueprint </span> </form>

Through the JS statement dynamic creation of the IMG element, element specific attributes depending on the situation, the main code is as follows:

Upload picture and preview Var input = document.getelementbyid ("File_input");

var imagetype = /image.*/; Var getonloadfunc = function (aimg)  {return function (evt)  {aImg.src = 

Evt.target.result;

}; } input.addeventlistener ("Change",  function (evt)  {for  (var i = 0, numfiles  = this.files.length; i < numfiles; i++)  {var file = 

This.files[i];

if  (!file.type.match (imagetype))  {continue;

}   var img = document.createelement ("img");

Img.style.width= "70px";

Img.style.height= "70px";

Img.style.marginleft= "10px";

Img.id= "Upload-img-show";

Var _img=document.getelementbyid ("Assess-form");

_img.appendchild (IMG); Img.onclick=function () {if  (confirm) (delete photo?)

")"  {img.style.display= "None";

} else {return false;

};

 img.style.display= "None"; } var reader = nEw filereader ();

Reader.onload = getonloadfunc (IMG);

Reader.readasdataurl (file); }}, false);