HTML Select picture after preview, save and upload

HTML code:

<inputtype= "File"ID= "File"style= "Display:none;"><imgsrc=""width= "200px"Height= "200px"ID= "Img-change"><ButtonID= "BTN">Save picture</Button>

JS Code:
Implement click on the picture simultaneously, trigger type=file this input

$ ("#img-change"). Click (function  () {    $ ("#file"). Click ();})

When input changes, if there is a picture, then preview the picture (here only to determine the changes in the file, not judging the picture)

$ ("#file"). Change (function(event) {varFiles =event.target.files, file; if(Files && files.length > 0) {        //get the currently uploaded fileFile = Files[0];//Action of file size check        if(File.size > 1024 * 1024 * 2) {alert (' Picture size cannot exceed 2mb! '); return false; }        //Gets the URL tool for window        varURL = window. URL | |Window.webkiturl; //generating a destination URL from file        varImgurl =url.createobjecturl (file); //Use attr to change the SRC attribute of img to the obtained URL$ ("#img-change"). attr ("src"), Imgurl);        //Use the following sentence to release a servo to this URL in memory, the URL will be invalid after the run        //Url.revokeobjecturl (imgurl);    }})

HTML Select picture after preview, save and upload