Webupload control implementation to delete uploaded files

This digest from http://www.we7.cc/manual/dev:func:common:app:tpl_appupload_image:html
<Div Id="Uploader" ><Div Class="Queuelist" ><Div Id="Dndarea"Class="Placeholder" ><Div Id="Filepicker" ></Div><P> or drag a photo here to select up to 30 sheets at a time</P></Div></Div><Div Class="StatusBar"Style="Display:none;" ><Div Class="Progress" ><span Class="Text" >0%</span><span Class="Percentage" ></span></Div><Div Class="Info" ></Div><Div Class="Btns" ><Div Id="FilePicker2" ></Div><Div Class="Uploadbtn" > Start uploading</Div></Div></Div></Div><Script>require ([' jquery ', ' webuploader '], function ($, webuploader) {return;//start initializing $ when domready (function () {var $wrap = $ (' #uploader '),//Picture Container $queue = $ ('<ul Class="FileList" ></ul> '). appendTo ($wrap. Find ('. Queuelist ')),  //the status bar, including the progress and control buttons $statusbar = $wrap. Find ('. StatusBar '),  //file Total Select information for the body. $info = $statusBar. Find ('. Info '),  //upload button $upload = $wrap. Find ('. uploadbtn '),  //did not select the content before the file. $placeHolder = $wrap. Find ('. PlaceHolder '),  $progress = $statusBar. Find ('. Progress '). Hide (),  // The number of files added FileCount = 0, //The total size of files added filesize = 0, //optimized retina, under Retina This value is 2ratio = Window.devicepixelratio | | 1, //thumbnail Size thumbnailwidth = * Ratio,thumbnailheight = * * ratio, //may have pedding, ready, uploading, confirm, done.state = ' pedding ',  //progress information for all files, key is file Idpercentages = {}, supporttransition = (function () {var s = docum Ent.createelement (' P '). Style,r = ' transition ' in S | | ' Webkittransition ' in S | | ' Moztransition ' in S | | ' Mstransition ' in S | | ' Otransition ' in s;s = Null;return r;}) (),  //webuploader instance uploader; //instantiation uploader = webuploader.create ({pick: {id: ' #filePicker ', Label: ' Click to select Image ') },DND: ' #dndArea ', paste: ' #uploader ',//swf file path swf: ' {$_w[' siteroot ']}app/resource/componets/webuploader/uploader.swf ',//File receive server. Server: ' {$_w[' siteroot ']}app/{php echo str_replace ('./', ', url (' Utility/file ', Array (' do ' = ' = ' upload ', ' type ' = > ' image '), true)} ', chunked:true,//runtimeorder: ' Flash ',//sendasbinary:true,filenumlimit:30,filesizelimit:30 * 1024x768 * 1024,//mfilesinglesizelimit:4 * 1024//1 M})  //Add "Add File" button, Uploader.addbutton ({id: ' #filePicke R2 ', Label: ' Continue to add '});  //when a file is added, it is responsible for the creation of the View function AddFile (file) {var $li = $ ('<Li Id="' + file.id + '" > ' + '<P Class="title" > ' + file.name + '</P> ' + '<P Class="Imgwrap" ></P> ' + '<P Class="Progress" ><span></span></P> ' + '</Li> '), $btns = $ ('<Div Class="File-panel" > ' + '<span Class="Cancel" > Delete</span> ' + '<span Class="Rotateright" > Rotate Right</span> ' + '<span Class="Rotateleft" > Rotate Left</span></Div> '). AppendTo ($li), $prgress = $li. Find (' p.progress span '), $wrap = $li. Find (' P.imgwrap '), $info = $ ('<P Class="Error" ></P> '), ShowError = function (code) {switch (code) {case ' exceed_size ': Text = ' file size exceeded '; break; ' Interrupt ': Text = ' On Pause; Default:text = ' upload failed, please retry '; $info. Text (text). AppendTo ($li);}; if (file.getstatus () = = = ' Invalid ') {ShowError (file.statustext);} else {//@todo Lazyload$wrap.text (' in preview '); uploader. Makethumb (file, function (Error, SRC) {if (error) {$wrap. Text (' cannot preview '); return;} var img = $ ('<img Src="' +src+ ' > '); $wrap. Empty (). Append (img);}, Thumbnailwidth, thumbnailheight); percentages[file.id] = [File.size, 0];file.rotation = 0;} File.on (' Statuschange ', function (cur, prev) {if (prev = = = ' Progress ') {$prgress. Hide (). width (0);} else if (prev = = = Queued ') {$li. Off (' MouseEnter mouseleave '); $btns. Remove (); Success if (cur = = = ' ERROR ' | | cur = = = ' Invalid ') {Console.log (file.statustext); ShowError (file.statustext);p ercentages[ file.id [1] = 1;} else if (cur = = = ' Interrupt ') {showerror (' Interrupt ');} else if (cur = = = ' Queued ') {percentages[file.id] [1] = 0; } else if (cur = = = ' Progress ') {$info. Remove (); $prgress. CSS (' Display ', ' block '),} else if (cur = = = ' complete ') {$li. AP Pend ('<span Class="Success" ></span> ');} $li. Removeclass (' state-' + prev). addclass (' state-' + cur);});   $li. On (' MouseEnter ', function () {$btns. Stop (). Animate ({height:30});});   $li. On (' MouseLeave ', function () {$btns. Stop (). Animate ({height:0});});   $btns. On (' click ', ' span ', function () {var index = $ (this). Index (), Deg; switch (index) {case 0:uploader.remov Efile (file); Return; case 1:file.rotation + = 90;break; case 2:file.rotation-= 90;break;}  if (supporttransition) {deg = ' rotate (' + file.rotation + ' deg) '; $wrap. css ({'-webkit-transform ': deg, '-mos-transf ORM ': deg, '-o-transform ': deg, ' transform ': deg});} else {$wrap. css (' filter ', ' Progid:DXImageTransform.Microsoft.BasicImage (rotation= ' + ((file.rotation/90)%4 + 4)%4 ) (+ ') ');}); $li. AppendTo ($queue);} &NBSP;//is responsible for view's destroy function RemoveFile (file) {var $li = $ (' # ' +file.id);d elete percentages[file.id];updatetotalprogress (); $li. Off (). Find ('. File-panel '). Off (). End (). remove ();  function updatetotalprogress () {var loaded= 0,total = 0,spans = $progress. Children (), Percent; $.each (percentages, function (k, v) {total + = v[0];loaded + = v[0] * v[1];} );  percent = total? Loaded/total:0; spans.eq (0). Text (Math.Round (percent *) + '% '), Spans.eq (1). css (' width ', Math.Round (p ercent * + '% '); UpdateStatus ();}  function UpdateStatus () {var text = ', stats; if (state = = = ' ready ') {text = ' check ' + filecount + ' picture, total ' + We Buploader.formatsize (fileSize) + '. ‘;} else if (state = = = ' Confirm ') {stats = Uploader.getstats (); if (stats.uploadfailnum) {text = ' uploaded successfully ' + Stats.successnum + ' photos to xx album, ' +stats.uploadfailnum + ' photo upload failed,<a Class="Retry"Href="#" > re-upload</a> Failed picture or<a Class="Ignore"Href="#" > Ignore</a> '} else {stats = uploader.getstats (); text = ' Total ' + FileCount + ' Zhang (' +webuploader.formatsize (fileSize) + '), uploaded ' + STA Ts.successnum + ' Zhang ';  if (stats.uploadfailnum) {text + = ', failed ' + Stats.uploadfailnum + ' Zhang ';}}   $info. html (text);}  function SetState (val) {var file, stats; if (val = = = state) {return;}   $upload. Removeclass (' state-' + state), $upload. addclass (' state-' + val); state = Val; switch (state) {case ' pedding ': $placeHolder. Removeclass (' element-invisible '); $queue. Hide (); $statusBar. addclass (' element-invisible ') ; Uploader.refresh (); Break; case ' ready ': $placeHolder. addclass (' element-invisible '); $ (' #filePicker2 '). Removeclass (' element-invisible '); $queue. Show (); $statusBar. Removeclass (' element-invisible '); Uploader.refresh (); Break;case ' uploading ': $ (' #filePicker2 '). addclass (' element-invisible '); $progress. Show (); $upload. Text (' pause upload '); Break;case ' paused ': $progress. Show (); $upload. Text (' continue upload '); Break;case ' confirm ': $progress. Hide ();$upload. Text (' Start uploading '). addclass (' disabled '); stats = Uploader.getstats (); if (stats.successnum &&!stats.uploadfailnum) { SetState (' Finish '); return;} Break;case ' Finish ': stats = uploader.getstats (), if (stats.successnum) {alert (' upload succeeded ');} else {//No successful picture, reset state = ' don ' E '; Location.reload ();} break;} UpdateStatus ();}  uploader.onuploadprogress = function (file, percentage) {var $li = $ (' # ' +file.id), $percent = $li. Find ('. Progress SP An ');  $percent. css (' width ', percentage * + '% ');p ercentages[file.id] [1] = percentage;updatetotalprogress (); }; uploader.onfilequeued = function (file) {filecount++;filesize + = file.size; if (FileCount = = = 1) {$placeHo Lder.addclass (' element-invisible '); $statusBar. Show ();  addfile (file); SetState (' ready '); updatetotalprogress ();};  uploader.onfiledequeued = function (file) {filecount--;filesize-= file.size; if (!filecount) {setState (' PE Dding ');}  removefile (file); updatetotalprogress ();};  uploader.on (' All ', function (type) {var stats;switch (type) {case ' uploadfinished ': setState (' confirm '); Break;ca Se ' StartuploAd ': setState (' uploading '); Break;case ' stopupload ': setState (' paused '); break;}});  uploader.onerror = function (code) {alert (' Eroor: ' + code);};   $upload. On (' click ', function () {if (Hasclass (' disabled ')) {return false;} if (state = = = ' ready ') {Uploader.upload (),} else if (state = = = ' paused ') {uploader.upload ();} else if (state = = = ' UPL Oading ') {uploader.stop ();}});   $info. On (' click ', '. Retry ', function () {uploader.retry ();});   $info. On (' click ', '. Ignore ', function () {alert (' Todo ');});   $upload. addclass (' state-' + state); updatetotalprogress ();});</script> 

Webupload control implementation to delete uploaded files