webuploader上传成功后怎么删除

Posted 2023-05-06

<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> 参考技术A

webuploader上传成功后可以通过输入删除程序进行删除。

具体操作方法：

1、打开webuploader。

2、“点击选择图片”选择要删除的已上传图片。

3、输入程序：

//移除资源

$remove = isset($param['remove']) ? $param['remove'] : array(); // 获取移除数据

unset($param['remove']);

$tools = new \\org\\Tools;

$result = $tools->del_file('../public/uploads/images/', $remove);

$param['photo'] = isset($param['photo']) ? implode(',', $param['photo']) : ''; //获取插入数据

4、点击“确定”即可。

参考技术B 前台删除用的方法
uploader.removeFile(file);//从队列中移除
如果使用uploader..getFiles().length来判断上传的数量的话，可以清空队列

uploader.reset();//重置队列

uplodify上传成功后，删除文件

uplodify控件用于web上传很方便，上传之前，添加到了队列中，若需要删除，官网手册提供了onCancel事件。但是，如果在BS的公告系统中，往往要求实现像邮箱中上传一样，自动上传。若用户需要删除刚刚上传的文件，怎么把最终的文件信息存数据库中呢？

解决办法：

1、首先，在onUploadSuccess事件中记下上传的文件信息

 1   onUploadSuccess: function (file, data, response) {
 2 
 3                 data = jQuery.parseJSON(data);
 4 
 5                 me.fileData[file.name] = {
 6                     fileId: file.id,
 7                     fileName: file.name,
 8                     fileSize: file.size,
 9                     fileType: file.type,
10                     fileLink: data.msg.url,
11                 };
12                 me.value = escape(jQuery.toJSON(me.fileData));
13 }

2、为删除<a>标签添加click事件：

 1         $("#fileQueue .cancel").live(‘click‘, function () {
 2             var fileId = this.parentElement.parentElement.id;
 4             jQuery.each(Fileupload.fileData, function (name, element)
 5             {
 6                 if (element.fileId == fileId)
 7                 {
 8                     delete Fileupload.fileData[name];
 9                     return;
10                 }
11             });
12 }）；

通过遍历fileData然后找到其中id匹配的，然后删除其中的信息；

3、当用户保存公告时候，只需要ajax请求上传FileData中的信息到数据库中即可；