tp3.1使用webuploader0.1.5插件上传图片

前端插件代码：

[html]  view plain  copy

1. <!--插件-->  
2.             <div id="uploader-demo">  
3.                 <!--用来存放item-->  
4.                 <div id="fileList" class="uploader-list"></div>  
5.                 <div id="filePicker">选择图片</div>  
6.             </div>  

[javascript]  view plain  copy

1. <link rel="stylesheet" type="text/css" href="{$Think.PUBLIC_JS_URL}/webuploader0.1.5/webuploader.css">  
2.     <script type="text/javascript" src="{$Think.PUBLIC_JS_URL}/webuploader0.1.5/webuploader.js"></script>  
3.     <script>  
4.   
5.         var $list=$("#fileList");   //这几个初始化全局的百度文档上没说明，好蛋疼  
6.         var thumbnailWidth = 500;   //缩略图高度和宽度 （单位是像素），当宽高度是0~1的时候，是按照百分比计算，具体可以看api文档  
7.         var thumbnailHeight = 500;  
8.         // 初始化Web Uploader  
9.         var uploader = WebUploader.create({  
10.             // 选完文件后，是否自动上传。  
11.             auto: true,  
12.             // swf文件路径  
13.             swf: "{$Think.PUBLIC_JS_URL}/webuploader0.1.5/Uploader.swf", //加载swf文件，路径一定要对  
14.   
15.             // 文件接收服务端。  
16.             server: 'index.php?s=Admin/CustomService/uploadImg',  
17.   
18.             // 选择文件的按钮。可选。  
19.             // 内部根据当前运行是创建，可能是input元素，也可能是flash.  
20.             pick: '#filePicker',  
21.   
22.             // 只允许选择图片文件。  
23.             accept: {  
24.                 title: 'Images',  
25.                 extensions: 'gif,jpg,jpeg,bmp,png',  
26.                 mimeTypes: 'image/'  
27.             }  
28.         });  
29.         //上传完成事件监听  
30.         uploader.on( 'fileQueued', function(file) {  
31.             //如发ajax，获取上传图片的地址通过设置属性显示出来  
32.             $.ajax({  
33.                 url: "index.php?s=Admin/CustomService/showCustomServiceImg",  
34.                 success: function($data) {  
35.                     console.log($data);  
36.                     // $('#showImg').attr('src',$data);    //设置属性显示图片  
37.                     if($data !== ''){  
38.                         alert('上传成功，请刷新页面');  
39.                     }  
40.   
41.                 }  
42.             });  
43.         });  

后端php原生上传代码：

[php]  view plain  copy

1. /** 
2.      * 原生上传图片 
3.      */  
4.     public function uploadImg(){  
5.         $file = $_FILES['file'];            //接收上传的图片  
6.   
7.         if($file['error'] == 0){  
8.             $savePath = DIR_MANAGE_PATH;     //群名片绝对路径配置  
9.             _mkdir($savePath);              //常量中的路径，文件不存在则创建  
10.   
11.             //效验文件大小  
12.             if($file['size'] > 3145728){  
13.                 $this->ajaxRtn(402,'图片大于3M');  
14.                 exit;  
15.             }  
16.   
17.             //效验文件格式  
18.             $fileType = explode('/',$file['type']);  
19.             if(array_key_exists($fileType[1],['jpg','png'])){  
20.                 $this->ajaxRtn(403,'图片类型不对');  
21.                 exit;  
22.             }  
23.   
24.             $filePath =  DIR_MANAGE_PATH.'/'.rand(1111,9999).'.png';    //上传到哪个位置  
25.             $uploadRes = move_uploaded_file($file['tmp_name'],$filePath);   //【关键在这，上传文件】  
26.   
27.             if($uploadRes){     //文件上传成功  
28.                 $obj = new \Think\Model('img');     //入库  
29.                 $data['img'] = $filePath;  
30.                 $res = $obj->add($data);  
31.                 //echo $obj->getLastSql();  
32.   
33.                 $this->ajaxRtn(200,$filePath);          //上传成功返回图片地址，以供显示  
34.                 if(!$res){  
35.                     $this->ajaxRtn(400,'上传失败');  
36.                 }  
37.             }  
38.         }else{  
39.             $this->ajaxRtn(401,'上传错误');  
40.         }  
41.     }  

[php]  view plain  copy

1. /** 
2.      * 返回状态码 
3.      * @param $code     状态码 
4.      * @param $message  信息 
5.      */  
6.     public function ajaxRtn($code,$message){  
7.         $msg = ['code'=>$code,'msg'=>$message];  
8.         echo  json_encode($msg);  
9.     }