Upload and Compress multiple photos

The previous has written a single image upload compression article, here to expand the number of pictures, the idea is the same, but a few more loops, so do not repeat, directly paste code.

The DOM structure is as follows:

<label for= "Imgfile">Please upload a picture:</label><inputID= "Imgfile"type= "File"Multiple Accept= "Image/jpeg,image/png,image/gif" /><spanID= "Progress"></span> <!--Upload Local Progress -<DivID= "ImgBox1"></Div>    <!--picture box for display -<DivID= "Btnbox">    <ButtonID= "Upbtn">Upload</Button></Div><DivID= "ImgBox2"></Div>    <!--Show mydata with picture box -<CanvasID= "MyCanvas"></Canvas>

The JS code is as follows:

<script src= "Js/jquery.min.js" ></script><script>//ele upload input button    functionImgup (ele) {varDataList = [],btnbox = document.getElementById (' Btnbox '); //getting filelist It is important to note that FileList is an object of an array of classes        varFileList = ele[0].files; if(fileList) { for(vari = 0,file;file = filelist[i];i++){                    //instantiating a FileReader object                    varReader =NewFileReader (); //calling the Readasdataurl methodreader.readasdataurl (file); Reader.onload=function(e) {//Get picture base64 encoding                        varresult = This. Result; //Assign a pre-compression picture to a value src                        varEximg =NewImage (); EXIMG.SRC=result; $("#imgBox1"). Append (eximg); varTotal =filelist.length; varNow = $ (' #imgBox1 '). Children (). length; $(' #progress '). HTML ("Current progress:" +now+ '/' +Total ); if(now = =Total ) {                            $(' #upBtn '). CSS (' Display ', ' block '); }                        varIMG =NewImage (); IMG.SRC=result; //gets the file size of the uploaded picture kb                        varImgsize = (e.total)/1024;if(imgsize<1000) {Datalist.push (result); }Else{img.onload=function(){                                //image original size, maximum width after compression, canvas width, size compression ratio                                varW = This. Width,h = This. height,maxwidth = 800,maxheight = 600, canw,canh,proportion; //determine if the image size is larger than the specified size                                if(w>maxwidth| | H>maxheight) {                                    if(w>h) {                                        //The picture is wide and highCANW =MaxWidth; Proportion= W/maxwidth;                                    CanH = h/proportion; }Else if(w<h) {                                        //The picture is wide and highCanH =MaxHeight; Proportion= H/maxheight; CANW = w/proportion;                                    }                                }Else{canw=W; CanH=h;                                }; Canvas= document.getElementById (' MyCanvas '), CTX= Canvas.getcontext (' 2d '); Canvas.width=canw; Canvas.height=CanH; Ctx.drawimage (IMG,0, 0, Canw,canh); varresult = Canvas.todataurl ("Image/jpeg", 0.9);                            Datalist.push (result);                        };            }                    };        }; }Else{            return false; }        returndataList;        }; varMyData = []; //Select Picture$ (' #imgFile '). Change (function() {MyData= Imgup ($ (' #imgFile ')));    }); varUPBTN = document.getElementById (' upbtn ')); //Upload button clickUpbtn.onclick =function() {console.log (myData);  for(varIinchmyData) {            varIMG = $ (")            $("#imgBox2"). Append (IMG); }    };</script>

If there is inaccurate expression, welcome to correct, welcome to add, thank you for reading.

Upload and Compress multiple photos