webuploader+springmvc+jsp Multi-image upload implementation

<span style= "font-family:arial, Helvetica, Sans-serif;" ><div class= "Floor-popad clearfix" ></span>

<span class= "Span-popleft" ><span class= "s-red" >*</span> Pictures: </span><div class= "FL" > <div class= "S-lightgray posra clearfix" ><div id= "Filepicker" class= "FL" > Local upload </div><p class= "FL" Style= "line-height:30px;" > Images Support jpg,gif format, no more than 2m</p></div><div class= "Clearfix uploader-list" id= "fileList" ></  Div></div></div>

<pre name= "Code" class= "JavaScript" > var $list = $ ("#fileList");        Initialize Web Uploader var Uploader = webuploader.create ({//Set file upload domain name fileval: "FileUpload",            Does not compress image resize:false,//whether to upload automatically after the file is selected. Auto:true,//Verify the total number of files, exceed the queue filenumlimit:3 not allowed,//Verify that the total file size exceeds the limit, the queue is not allowed to be exceeded            。           filesizelimit:1024,//verifies that a single file size exceeds the limit and is not allowed to join the queue.            filesinglesizelimit:1024,//swf file path swf: ' ${ctx}/cy/js/lib/uploader.swf ',            The file receives the service side. Server: ' ${ctx}/advert/aptituimgupload.html ',//Select the File button.            Optional.            The internal is created according to the current run, either the INPUT element or flash.            Pick: ' #filePicker ',//Allow only image files to be selected. Accept: {title: ' Images ', Extensions: ' Gif,jpg,jpeg,bmp,png ', mimetypes: ' im        age/* '}}); //When a file is added Uploader.on (' filequeued ', function (file) {var $li = $ (' <div id= "' + file.id + '" cl ass= "File-item thumbnail" > ' + ' <input type= "hidden" name= "Adimageurl" id= "Adimageurl ' + file.id + '"/> ' + ' < Img> ' + ' <div class= "info" > ' + file.name + ' </div> ' + ' <div class= ' remove-this ' >x</div> ' + '            </div> ');            var $img = $li. Find (' img ');            $list $list. Append ($li) for the container jquery instance;            Create thumbnails//If you are not a picture file, you can not call this method.                Thumbnailwidth x thumbnailheight for x uploader.makethumb (file, function (Error, SRC) {                    if (Error) {$img. replacewith (' <span> cannot preview </span> ');                Return            } $img. attr (' src ', src);            }, 100, 100);            Delete Picture $list. Off ("Click.removefile");              $list. On ("Click.removefile", '. Remove-this ', function (EV) {  Ev.preventdefault ();                Uploader.removefile (file);            $ (this). Parent (). remove ();        });        });        Create a progress bar in real-time display during file upload. Uploader.on (' uploadprogress ', function (file, percentage) {var $li = $ (' # ' +file.id), $perce            NT = $li. Find ('. Progress span '); Avoid repeatedly creating if (! $percent. length) {$percent = $ (' <p class= "Progress" ><span></spa            N></p> '). AppendTo ($li). Find (' span ');        } $percent. css (' width ', percentage * 100 + '% ');        });        File upload succeeded, add success class to item, upload success with style tag.            Uploader.on (' uploadsuccess ', function (file,obj) {$ (' # ' +file.id). addclass (' Upload-state-done ');            $ (' # ' +file.id). append ();                if (obj.code==1) {$ ("#adImageUrl" +file.id). Val (obj.msg);//Save server Return picture address}}); triggered when all file uploads are complete.        Deletes a parent container based on the text box ID. Wp.Oader.on (' uploadfinished ', function (file) {var m = document.getelementsbyname ("Adimageurl");              if (M.length > 3) {var obj = m[3];             $ (' # ' +obj.id). Parent (). remove ();                }        });        File upload failed, display upload error. Uploader.on (' Uploaderror ', function (file) {var $li = $ (' # ' +file.id), $error = $li. Find (' di            V.error '); Avoid repeatedly creating if (! $error. length) {$error = $ (' <div class= ' error ' ></div> '). AppendTo (            $li);        $error. Text (' upload failed ');        });        Finished uploading, success or failure, first delete the progress bar.        Uploader.on (' uploadcomplete ', function (file) {$ (' # ' +file.id). Find ('. Progress '). Remove ();                });        Execute the Delete method $list. On ("click", ". Remove-this", function () {$ (this). "Parent (). remove (); });/** * Initialize picture */function Initimageview (obj) {var str= '; for (var i=0;i<obj.length;i++) {str + = ' <div id= ' prevIewimage_ ' + i + ' "class=" File-item thumbnail "> ' + ' <input type=" hidden "name=" Adimageurl "value= ' + obj[i] + ' id= ' AdI Mageurl ' + i + ' "/> ' + '  ' + ' <div class = "Info" ></div> ' + ' <div class= "remove-this" >x</div> ' + ' </div> ';} $list. html (str); $list for the container jquery instance}/** * Popup Dialog method * @param hid * @param ad */function mymask () {var _adimageurl = $ (obj). attr ("Adimageurl ");//Picture address var arr = _adimageurl.split (", "); if (arr.length>0 && arr[0]!= "") {Initimageview (arr);//Initialize Picture}}

webuploader+springmvc+jsp Multi-image upload implementation