TP5用webuploader实现图片上传

PHP模板解析路径问题

首先，配置文件添加代码
位置：application/config.php

return [
    'admin' => '/static/admin',
],

其次，php中读取配置文件

$admin = config('admin');
或者
$admin = config("view_replace_str.__ADMIN__"); //重点推荐

整合TP5

1、引入CSS文件

2、初始化

$(document).ready(function(){

        // Bootstrap fileinput插件初始化
        $('#file-zh').fileinput({
          language: 'zh',
          uploadUrl: '#',
          allowedFileExtensions: ['jpg', 'png', 'gif'],
        });

        // 初始化Web Uploader
        uploader = WebUploader.create({
            pick: {
                id: '#filePicker-2',
                label: '点击选择图片'
            },
            formData: {
                uid: 123
            },
            dnd: '#dndArea',
            paste: '#uploader',
            swf: '__ADMIN__/plugins/webuploader-0.1.5/Uploader.swf',
            chunked: false,
            chunkSize: 512 * 1024,
            server: 'http://webuploader.duapp.com/server/fileupload.php',
            // runtimeOrder: 'flash',

            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            },

            // 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。
            disableGlobalDnd: true,
            fileNumLimit: 300,
            fileSizeLimit: 200 * 1024 * 1024,    // 200 M
            fileSingleSizeLimit: 50 * 1024 * 1024    // 50 M
        });

});

3、修改common.php

位置：\application\admin\common.php

function images($fieldinfo){
    //字段名
    $field = $fieldinfo['field'];

    $str = <<
            

                

                    

                    
或将图片拖到这里，单次最多可选10张
                
            
            

                
 0%  
                

                

                    

                    
开始上传
                
            
        

EOF; return $str; }

4、控制器

//多图片或多文件上传
public function upload_images(){
    $file = request()->file('file');
    $info = $file->move(ROOT_PATH . 'public/uploads');
    if($info) {
        return json_encode($info->getSaveName());
    }
}

5、上传限制（图片个数和类型）

首先，图片个数

$maxnumber = $setting['maxnumber'];

有两个地方需要设置

    

        

        
或将图片拖到这里，单次最多可选 $maxnumber 张
    


// 实例化
uploader = WebUploader.create({

    // 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。
    disableGlobalDnd: true,
    fileNumLimit: $maxnumber,
    fileSizeLimit: 200 * 1024 * 1024,    // 200 M
    fileSingleSizeLimit: 50 * 1024 * 1024    // 50 M
});


//上传成功返回文件名
uploader.on('uploadSuccess', function(file,response){
    alert(response);
});

// 上传错误提示
uploader.onError = function( code ) {
    if(code == "Q_EXCEED_NUM_LIMIT") {
       layer.alert("只能上传 $maxnumber 张图片");
    } else if(code == "F_DUPLICATE") {
       layer.alert("重复上传");
    } else {
        layer.alert("错误代码：" + code);
    }
};

其次，图片类型

$allowext = $setting['allowext'];

// 实例化
uploader = WebUploader.create({
    pick: {
        id: '#filePicker-2',
        label: '点击选择图片'
    },
    formData: {
        uid: 123
    },
    dnd: '#dndArea',
    paste: '#uploader',
    swf: '$admin/plugins/webuploader-0.1.5/Uploader.swf',
    chunked: false,
    chunkSize: 512 * 1024,
    server: '$url',
    // runtimeOrder: 'flash',

    accept: {
        title: 'Images',
        extensions: '$allowext',
        mimeTypes: 'image/*'
    },

    // 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。
    disableGlobalDnd: true,
    fileNumLimit: $maxnumber,
    fileSizeLimit: 200 * 1024 * 1024,    // 200 M
    fileSingleSizeLimit: 50 * 1024 * 1024    // 50 M
});

6、保存到数据库

思路：异步发送到控制器，控制器上传成功，则返回文件名；前端添加隐藏表单，把这个文件名作为属性隐藏起来；统一提交到数据库保存

//上传成功返回文件名
uploader.on('uploadSuccess', function(file,response){
    var images_value = $('#info_$field').val()=='' ? '' : $('#info_$field').val() + ',';
    $('#info_$field').val( images_value + response);
});

完善WebUploader相关功能

（一）图片上传成功显示删除按钮

思路：修改common.php

file.on('statuschange', function( cur, prev ) {

    if ( prev === 'progress' ) {
        prgress.hide().width(0);
    } else if ( prev === 'queued' ) {
        //li.off( 'mouseenter mouseleave' ); //解除事件监听
        //btns.remove();
        li.find( 'span.rotateLeft' ).remove(); //移除左旋转按钮
        li.find( 'span.rotateRight' ).remove(); //移除右旋转按钮
    }
});

（二）执行删除操作

思路：把上传成功的图片路径赋值给图片

1、修改common.php

$delete_url = url('delete_file');
var img_src = li.attr('studyfox_img');

// 负责view的销毁
function removeFile( file ) {
    var li = $('#'+file.id);
    var img_src = li.attr('studyfox_img');

    delete percentages[ file.id ];
    updateTotalProgress();
    li.off().find('.file-panel').off().end().remove();

    //后台删除图片
    $.ajax({
        url: '$delete_url',
        type: 'POST',
        data: {'img': img_src},
        success: function(result, textStatus){
            alert(textStatus);
            alert(result);
        }
    });
}

上传成功返回文件名

uploader.on('uploadSuccess', function(file,response){
    var images_value = $('#info_$field').val()=='' ? '' : $('#info_$field').val() + ',';
    $('#info_$field').val( images_value + response);
    //在当前图片LI里添加图片地址
    $('#'+file.id).attr('studyfox_img',response);
});

2、把图片路径发给控制器处理

//删除文件或图片
public function delete_file(){
    $delete_url = input('img');
    try {
      unlink(ROOT_PATH . 'public/uploads/' . $delete_url);  //删除成功返回1
    } catch (Exception $e) { }
}

完整代码

function images($fieldinfo){
    //字段名
    $field = $fieldinfo['field'];
    $url = url('upload_images');
    $delete_url = url('delete_file');
    //反序列化设置项
    $setting = unserialize($fieldinfo['setting']);
    $allowext = $setting['allowext'];
    $maxnumber = $setting['maxnumber'];

    $str = <<
        

            

                

                    

                    
或将图片拖到这里，单次最多可选 $maxnumber 张
                
            
            

                
 0%  
                

                

                    

                    
开始上传
                
            
        

        
        


EOF;
    return $str;
}