Image upload processing in "Juincen" Web Jquery+ajax+springmvc

Today there is a need to do the project, the page needs to upload a picture, before the resolution, not written down.

In front of the user to select a picture, and then can preview, and then upload, I resolved.

Preview:

There is an ordinary input tag in the HTML, id:uploadfile

<type= "file"  ID= "UploadFile"/>

There is also an IMG tag that can be previewed, and this img now has no src attribute, Id:imgpreview

<width= " +" height= "  ID"= "Imgpreview" />

Then, in JS, listen for this input change event (after selecting the image)

/* * * Select File to start execution */ $ (' #uploadFile '). Change (function  () {        //  get the first element        of a filelist var f = document.getElementById (' UploadFile '). Files[0];         var src= window. Url.createobjecturl (f);        $ ("#imgpreview"). attr ("src", src);        Console.log (SRC); // look at what this can be viewed as a thing });

Then you can implement the preview!

Upload:

(not finished to update ~)

Juincen image upload processing in the Web Jquery+ajax+springmvc