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:;" onclick="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 [e-mail]] 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);    }    }

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