THINKPHP中使用webuploader上传图片插件

在一些项目中，我们很多时候都需要上传图片，现在我使用webuploader结合THINKPHP做一个上传图片的示例给大家

HTML代码如下：

    <html>
        <head>
            <link rel="stylesheet" type="text/css" href="Public/static/webuploader.css"><!-- 引用插件css -->
        </head>
    <body>
    <div id="uploader-demo">
        <!--用来存放item-->
            <div id="fileList" class="uploader-list">
            </div>
            <input type="hidden" id="img_input" name="file_image" value="">
        <div id="filePicker">选择图片</div>
    </div>
    </body>
    <script type="text/javascript" src="Public/static/jquery-3.1.1.js"></script>  <!-- 引用jquery -->  
    <script type="text/javascript" src="Public/static/webuploader.js"></script>    <!-- 引用插件js -->
    <script type="text/javascript">
               var $list=$("#fileList");   //这几个初始化全局的百度文档上没说明，好蛋疼
               var thumbnailWidth = 100;   //缩略图高度和宽度 （单位是像素），当宽高度是0~1的时候，是按照百分比计算，具体可以看api文档  
               var thumbnailHeight = 100;  
               var uploader = WebUploader.create({
                // 选完文件后，是否自动上传。
               auto: true,
                // swf文件路径
               swf: '/new/public/static/uploader.swf', //加载swf文件，路径一定要对
                // 文件接收服务端。
                server: '{:U("index/index/upload")}',
                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: '#filePicker',
                // 只允许选择图片文件。
                accept: {
                    title: 'Images',
                    extensions: 'gif,jpg,jpeg,bmp,png',
                    mimeTypes: 'image/'
                },
                //需要图片压缩则加入以下参数
                compress:{
                    width: 700,
                    //height: 900,
                    // 图片质量，只有type为`image/jpeg`的时候才有效。
                    quality: 90,
                    // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
                    allowMagnify: false,
                    // 是否允许裁剪。  
                    crop: false,
                    // 是否保留头部meta信息。  
                    preserveHeaders: true,  
                    // 如果发现压缩后文件大小比原来还大，则使用原来图片  
                    // 此属性可能会影响图片自动纠正功能  
                    noCompressIfLarger: false,  
                    // 单位字节，如果图片大小小于此值，不会采用压缩。  
                    compressSize: 0
                }
            });
          //上传完成事件监听
            uploader.on( 'fileQueued', function(file) {
                var $li = $(
                        '<div id="' + file.id + '" class="file-item thumbnail">' +
                            '<img>' +
                            '<div class="info">' + file.name + '</div>' +
                        '</div>'
                        ),
                    $img = $li.find('img');
                // $list为容器jQuery实例
                       $list.append( $li );
                // 创建缩略图
                // 如果为非图片文件，可以不用调用此方法。
                // thumbnailWidth x thumbnailHeight 为 100 x 100
                uploader.makeThumb( file, function( error, src ) {
                    if ( error ) {
                        $img.replaceWith('<span>不能预览</span>');
                        return;
                    }
                    $img.attr( 'src', src );
                }, thumbnailWidth, thumbnailHeight );
            });
             // 文件上传成功
            uploader.on('uploadSuccess', function(file,ret){
                $('#img_input').val('Public/Upload/image/'+ret.savepath+ret.url);
            });
    </script>
    </html>

 

 

 THINKPHP控制器上传方法

    // 上传图片
     public function uploader(){
        if (!empty($_FILES)) {
            $name = I('name');
            $upload = new \Think\Upload();// 实例化上传类
            $upload->maxSize = 2048000;
            $upload->exts      =     array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
            $upload->rootPath  =     './Public/Upload/image/'; // 设置附件上传根目录
            $upload->savePath  =     ''; // 设置附件上传（子）目录
            // 上传文件 
            $info   =   $upload->upload();
            if(!$info) {// 上传错误提示错误信息
                $this->error($upload->getError());
                $this->ajaxReturn(array('state'=>1,'message'=>$upload->getError()));
            }else{// 上传成功
                $data['url'] = $info['file']['savename'];
                $data['savepath'] = $info['file']['savepath'];
                $this->ajaxReturn($data);
            }
        }
    }

 好了，完成

posted @ 2017-07-18 16:00  智昕  阅读(1644)  评论(0)    收藏  举报