Event SEO Terbesar Menjadi Pakar SEO itu Mudah Belajar SEO dari Pakarnya Langsung, Tanpa Peslu Tal Error, Duplikasi Strategi HTMLS: Upload Images with Client Side Resize Tutorial by Stefan Trost 28/10/2016 at 25:49 Images and pictures are becoming larger and larger today - often they are too big for reasonably displaying them on a website. Of ‘course, itis possible to reduce the image after an upload via PHP, but this can be very resource consuming and should therefore be avoided in most cases, on his was the reason, | have written a tutorial in which have described how to resize an image directly on client side im the browser for sending a reduced version of i to the server without using a server-side PHP seript. However, the script introduced in that tutorial could ‘only upload ane image at ance. Now, | want to explain how to upload multiple images atthe same tine in this tutorial Because large parts ofthe scripts are identical, | only want to Gescribe the changes here. Please refer to the frst tutorial linked above for all other explanations. Of course, you wil find the full code at the end of this tutorial in complete length HTML In our HTML, we only need to change one thing, We have to add the attribute “multiple” to our file input fled With this, we are allowing the user to select multiple files JavaScript ‘Also the JavaScript code remains identical to the greatest extent The first tutorial, we have readout the files using var file = ‘target iles(0] With doing that, we have only read out the first element of the aray etarget-files (the first element has the index 0) foe (van = $ ¢ estargetttes length 49) { ‘ar file = estangstle 5) , Because now, we want to arepare for an arbitrary numberof files, we have added a loop at this point beginning a the start index 0 and ‘ending at the number of selected files at etargetfiles.length. Within the loop, we are referring tothe current file wit var file ‘etarget lest]. Otherwise, we are proceeding ke before. docarntgeteleentbys ina) value = tau; ‘lecanrteteloertyia pain vlan o=eS08L © *|*5 While im the frst tutorial, we have cirectly stored the base&4 encoded dataURL in the hidden field, row, we are instead appending the varlable at the end! ofthe existing content ofthe field. For this, we are using the delimiter “Iso that we can store multiple images in only ‘one fied PHP:We have extended our PHP code by a loop, too. However fist, we are using the function explodeO to separate the single image data attached to each other again. After that, we are looping overall individual datasets inorder to store each image individually. Sing + expo, $0" for (84 +05 $4 « counting) = 35 80 singe = sine]: Ses “uptonds/ sn’ antes") Sse ‘To ensure that the Images do not have the same name (which would result in mutually overwriting), we are appending the counting varlable $1 is Image number a the end of each filename The entire Page Finally, here isthe full changed and adjusted page for the multi-image-upload, This page contains the complete HTML, PHP and JavaScrips code that is necessary Greate ome BF ours 90800 for ($1 = 0; $< comeing) = 15 $49 i (stepstsing( st, “datas tnage/spogsbaset,") me 0) Sire(st} = strareotace eat nage/ pentose», Sng): sete pe } 4 (stegostsingl St), “4atasinage/pnastasest") ome 8) ( Sines} = strarcoteceeatoempeorgvsestyy , Sint S42 Poa > Sins] serrepacet” “+, Stats Sets = sce oneceteing itt Sele © plode/ing este waite.“ 88.$05 16 (este put eontetst$Fe, $4580) ¢ else ‘tho "coprage $5 could rot be seve cf": , > > ‘input tein. Seg ane “input Lent Sve” ype sabes val fem Upon» eriot> sanction tilecangets) { ocnen got anentsT4 Sop 08") valve = * foe iar = 8; 5 ¢ start fier lengths $6 ( evcanaetfitest: 1 (etlecype oo Mase joen” || Alege <= “inge/eg") ae render + Batenrender.onond + function(rentesvent) { var Snags = ne Tones Tnaeerenond = funtion ivgebvnt) ae = inoge width Veo drapes bets $6 669) (46 (a> macht ( none eszos wae Pieoe (44 (> emcstze) Caeonecsizeny Pe stees 2 faves eden» hi vat pettonene ("24") dronnageeage, WF tetiesype sv nage/Jee) sor GOON > cnet SbUCR CIMA, 1. pase ( tciart.crenttiorers(‘cara' ) Acne. geteenentyt4( ope") vatue = dataune + “1s : a ender reatapataln file); pene coeuon.gevthvertytery_fes")waive» "5 Steet iease only select mages In G- 8 PNE-OPNE,") > , > cone. et Every rg F105) abeEerListenent change, Fechaney F585 ertpes tpperninay ‘The page can be named as “upload_resize.multiple php", for example, Really appreciated to you Itis a very good job. 7102/2018 31858 ue ‘Thank you so much, i's simple, lean and effective... You're a Ife saver. Excellent... Very simple, clean and effective, you'te a lifesaver, thank you so much. | must be doing something wrong, cause I cant get it to upload multiple images. only uploads a single image cach time. 26/05/2018 30:57 0