webuploader 多图上传删除方法实现

webuploader配合后端实现多图上传并且入库：

效果图：

① 数据库设计用的一个字段photo存储，类型text防止图片过多导致长度不够，每张图片用‘，’连接成字符串；

如：上传 img1.jpg，img2.jpg

存储值：img1.jpg，img2.jpg

② 两步工作：

A.前端获取“要保存的所有图片” 和 “点击删除的所有图片”；

html部分：

<div class="form-group">
   <label class="col-sm-3 control-label">展示图片</label>
   <div class="col-sm-7">
   <div id="fileList" class="uploader-list" style="float:right"></div>
   <div id="imgPicker" style="float:left">添加图片</div>
   </div>
</div>

js部分：

   <script type="text/javascript" src="/static/admin/webupload/webuploader.min.js"></script> //引入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 = $(
                    '<div id="' + file.id + '" class="file-item thumbnail draggable-element d-"'+file.id.substr(file.id.length-1,1)+' style="position:relative;">' +
                        '<img>' +
                        '<a class="file-panel" href="javascript:;" οnclick="remove(\''+up_src+'\', \''+file.id+'\')">' +
                            '<span class="fa fa-close"></span>' +
                        '</a>' +
                        '<input type="hidden" id="data_photo" name="photo[]" value="'+up_src+'">' +
                    '</div>' 
                    ),
                $img = $li.find('img');

            // $list为容器jQuery实例
            $list.append( $li );

            // 创建缩略图 如果为非图片文件，可以不用调用此方法 100（宽） x 100（高）
            uploader.makeThumb( file, function( error, src ) {
                if ( error ) {
                    $img.replaceWith('<span>不能预览</span>');
                    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 1012684399@qq.com] THINK MORE DO LESS
     */
    function remove(file, obj){
        $('#'+obj).remove();
        var html = '<input type="hidden" id="data_photo" name="remove[]" value="'+file+'">';
        $('#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);
	    }
    }

完美收官。有疑问可以联系我。