웹 업로드 컨트롤 이 업 로드 된 파일 을 삭제 합 니 다.

    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>        ，      30 </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">    </div> </div> </div> </div>   <script> require(['jquery', 'webuploader' ], function($, WebUploader) { return; //  domReady         $(function() { var $wrap = $('#uploader'),   //      $queue = $( '<ul class="filelist"></ul>' ) .appendTo( $wrap.find( '.queueList' ) ),   //    ，          $statusBar = $wrap.find( '.statusBar' ),   //         。 $info = $statusBar.find( '.info' ),   //      $upload = $wrap.find( '.uploadBtn' ),   //           。 $placeHolder = $wrap.find( '.placeholder' ),   $progress = $statusBar.find( '.progress' ).hide(),   //         fileCount = 0,   //          fileSize = 0,   //   retina,  retina     2 ratio = window.devicePixelRatio || 1,   //       thumbnailWidth = 110 * ratio, thumbnailHeight = 110 * ratio,   //    pedding, ready, uploading, confirm, done. state = 'pedding',   //          ，key file id percentages = {},   supportTransition = (function(){ var s = document.createElement('p').style, r = 'transition' in s || 'WebkitTransition' in s || 'MozTransition' in s || 'msTransition' in s || 'OTransition' in s; s = null; return r; })(),   // WebUploader   uploader;   //     uploader = WebUploader.create({ pick: { id: '#filePicker', label: '      ' }, dnd: '#dndArea', paste: '#uploader', // swf     swf: '{$_W['siteroot']}app/resource/componets/webuploader/Uploader.swf', //        。 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 * 1024 * 1024, // 30 M fileSingleSizeLimit: 4 * 1024 * 1024 // 1 M });   //   “    ”   ， uploader.addButton({ id: '#filePicker2', label: '    ' });   //            ，  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">  </span>' + '<span class="rotateRight">    </span>' + '<span class="rotateLeft">    </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 = '      '; break;   case 'interrupt': text = '    '; break;   default: text = '    ，   '; break; }   $info.text( text ).appendTo( $li ); };   if ( file.getStatus() === 'invalid' ) { showError( file.statusText ); } else { // @todo lazyload $wrap.text( '   ' ); uploader.makeThumb( file, function( error, src ) { if ( error ) { $wrap.text( '    ' ); 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(); } //    if ( cur === 'error' || cur === 'invalid' ) { console.log( file.statusText ); showError( file.statusText ); percentages[ 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.append( '<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.removeFile( 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-transform': deg, '-o-transform': deg, 'transform': deg }); } else { $wrap.css( 'filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ (~~((file.rotation/90)%4 + 4)%4) +')'); } }); $li.appendTo( $queue ); }   //   view    function removeFile( file ) { var $li = $('#'+file.id); delete 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 * 100 ) + '%' ); spans.eq( 1 ).css( 'width', Math.round( percent * 100 ) + '%' ); updateStatus(); }   function updateStatus() { var text = '', stats;   if ( state === 'ready' ) { text = '  ' + fileCount + '   ， ' + WebUploader.formatSize( fileSize ) + '。'; } else if ( state === 'confirm' ) { stats = uploader.getStats(); if ( stats.uploadFailNum ) { text = '     ' + stats.successNum+ '    XX  ，'+ stats.uploadFailNum + '       ，<a class="retry" href="#">    </a>     <a class="ignore" href="#">  </a>' } } else { stats = uploader.getStats(); text = ' ' + fileCount + ' （' + WebUploader.formatSize( fileSize ) + '），   ' + stats.successNum + ' ';   if ( stats.uploadFailNum ) { text += '，  ' + stats.uploadFailNum + ' '; } }   $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( '    ' ); break; case 'paused': $progress.show(); $upload.text( '    ' ); break; case 'confirm': $progress.hide(); $upload.text( '    ' ).addClass( 'disabled' ); stats = uploader.getStats(); if ( stats.successNum && !stats.uploadFailNum ) {  setState( 'finish' ); return; } break; case 'finish': stats = uploader.getStats(); if ( stats.successNum ) { alert( '    ' ); } else { //        ，   state = 'done'; location.reload(); } break; } updateStatus(); }   uploader.onUploadProgress = function( file, percentage ) { var $li = $('#'+file.id), $percent = $li.find('.progress span');   $percent.css( 'width', percentage * 100 + '%' ); percentages[ file.id ][ 1 ] = percentage; updateTotalProgress(); };   uploader.onFileQueued = function( file ) { fileCount++; fileSize += file.size;   if ( fileCount === 1 ) { $placeHolder.addClass( 'element-invisible' ); $statusBar.show(); }   addFile( file ); setState( 'ready' ); updateTotalProgress(); };   uploader.onFileDequeued = function( file ) { fileCount--; fileSize -= file.size;   if ( !fileCount ) { setState( 'pedding' ); }   removeFile( file ); updateTotalProgress(); };   uploader.on( 'all', function( type ) { var stats; switch( type ) { case 'uploadFinished': setState( 'confirm' ); break; case 'startUpload': setState( 'uploading' ); break; case 'stopUpload': setState( 'paused' ); break; } });   uploader.onError = function( code ) { alert( 'Eroor: ' + code ); };   $upload.on('click', function() { if ( $(this).hasClass( 'disabled' ) ) { return false; } if ( state === 'ready' ) { uploader.upload(); } else if ( state === 'paused' ) { uploader.upload(); } else if ( state === 'uploading' ) { uploader.stop(); } });   $info.on( 'click', '.retry', function() { uploader.retry(); } );   $info.on( 'click', '.ignore', function() { alert( 'todo' ); } );   $upload.addClass( 'state-' + state ); updateTotalProgress(); }); }); </script>