webuploader 多图上传删除方法实现
webuploader配合后端实现多图上传并且入库：
效果图：
① 数据库设计用的一个字段photo存储，类型text防止图片过多导致长度不够，每张图片用‘，’连接成字符串；
如：上传 img1.jpg，img2.jpg
存储值：img1.jpg，img2.jpg
② 两步工作：
A.前端获取“要保存的所有图片” 和 “点击删除的所有图片”；
html部分：
添加图片
js部分：
//引入js，换成你自己的路径
/*
* 图片上传脚本
*/
var $list = $('#fileList');
//上传图片,初始化WebUploader
var uploader = WebUploader.create({
auto: true,// 选完文件后，是否自动上传。
swf: '/static/admin/js/webupload/Uploader.swf',// swf文件路径 换成你的接收路径
server: "/admin/upload/upload.html",// 文件接收服务端 换成你的接收路径
duplicate :true,// 重复上传图片，true为可重复false为不可重复
pick: '#imgPicker',// 选择文件的按钮
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/jpg,image/jpeg,image/png'
},
'onUploadSuccess': function(file, data, response) {
var up_src = data._raw.replace("\\", "\/");
//上传成功后显示图片
var $li = $(
'' +
'![]()
' +
'' +
'' +
'' +
'' +
''
),
$img = $li.find('img');
// $list为容器jQuery实例
$list.append( $li );
// 创建缩略图 如果为非图片文件，可以不用调用此方法 100（宽） x 100（高）
uploader.makeThumb( file, function( error, src ) {
if ( error ) {
$img.replaceWith('不能预览');
return;
}
$img.attr( 'src', src );
}, 100, 100 );
}
});
// 当有文件添加进来的时候
uploader.on( 'fileQueued', function( file ) {
});
// 文件上传成功
uploader.on( 'uploadSuccess', function( file ) {
$( '#'+file.id ).find('p.state').text('上传成功！');
});
// 文件上传失败，显示上传出错。
uploader.on( 'uploadError', function( file ) {
$( '#'+file.id ).find('p.state').text('上传出错!');
});
/**
* [remove 移除图片]
* @post [file] [文件名 （必填）]
* @post [obj] [操作对象] [前台操作数据 移除dom标志]
*
* @return
* @Author[summer [email protected]] THINK MORE DO LESS
*/
function remove(file, obj){
$('#'+obj).remove();
var html = '';
$('#fileList').append(html);
}B.后端入库要保存的图片，从内存删除要删除的图片
经过A步骤，我们已经将图片上传到了服务器并且得到了
要入库的所有图片信息数组：$photo
所有点击删除了的图片信息数组：$remove
然后我们：implode（‘，’，$photo）后入库，foreach $remove后一个个删除资源
注：这个地方存储的时候两个php函数比较关键，
implode() ->数组变字符串
explode() ->字符串变数组，用法自行百度。
//移除资源
$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']) : ''; //获取插入数据附php资源删除tools方法：
/**
* [del_file 删除文件]
* @param [file][array] [资源集合] [必填][默认图片上传路径]
* @param [path][string] [资源路径] [必填]
* author summer 1012684399 THINK MORE DO LESS [WEHACK]
*/
public function del_file($path='../public/uploads/images/', $file){
foreach ($file as $k => $v) {
$source = $path.$v; //资源路径
$result = @unlink ($source);
}
}完美收官。有疑问可以联系我。