ThinkPHP3.2.3结合jQuery插件jQuery-File-Upload实现多图上传

最近使用了jQuery插件jQuery-File-Upload，这是一款不错的图片上传插件。这是我第一次写博客，如有不足，请各位大牛指出。
首先从https://github.com/blueimp/jQuery-File-Upload上下载jQuery-File-Upload插件压缩包，基本目录如下

然后把其中的js文件，css文件，img文件放在PUBLIC目录下，然后去创建视图文件，接下来是我的视图代码
引入必要css/js文件(网上也有一些精简版的css/js文件引入)，也就是将JQuery-File-Upload中的index.html拷贝一份
需要注意input标签的name为files[]这样才可以支持多图上传,form表单文件头必须包含enctype=”multipart/form-data”


添加图片


然后修改main.js中的代码
(‘#fileupload’).fileupload({  
        // Uncomment the following to send cross-domain cookies:  
        //xhrFields: {withCredentials: true},  
        url: “你所提交的Controlelr中的方法”  
    });  
接下来在index.html写上jQuery-File-Upload初始化代码  
  var uploader =(“#fileupload”);
uploader.fileupload({
url : “PUBLIC/Store/upImg”,
dataType : ‘json’,
autoUpload : false,
maxNumberOfFiles : 5,
fileInput : uploader.find(“input:file”),
maxFileSize : 5000000,
previewMaxWidth : 200,
previewMaxHeight : 200
});
uploader.bind(‘fileuploaddone’, function(e, data) {
var json = data.result;
/* alert(json.userdata.fileRealName);
alert(json.userdata.id); */
alert(json.userdata.fileRealName);
alert(json.userdata.id);
});
下面贴上我的Controller控制器中的方法代码
if(!empty(_FILES)) {upload = new \Think\Upload();//实例化上传类
upload−>maxSize=3145728; upload->exts = array(‘jpg’, ‘gif’, ‘png’, ‘jpeg’);
upload−>savePath=‘Public/GoodImg/′; upload->rootPath = ‘./’;
upload−>subName= _SESSION[‘user’][‘id’];
upload−>saveName= _SESSION[‘user’][‘id’].”-“.time();
info= upload->upload( FILES);if(! info){
this−>error( upload->getError());
}else{
foreach( infoas item){
data["files"][][′name′]= item[‘savename’];
data["files"][][′size′]= item[‘size’];
data["files"][]['url']=__ROOT__.'/'.info[‘savepath’]. item[‘savename′]; data["files"][]['thumbnailUrl']=__ROOT__.'/'. info[‘savepath′]. item[‘savename’];
data["files"][]['deleteUrl']=__ROOT__.'/'.info[‘savepath’]. item[‘savename′]; data[“files”][][‘deleteType’]=”DELETE”;
}
this−>ajaxReturn( data);
}
}
此时上传需要注意的生成的json数据格式必须为
{“files”: [
{
“name”: “picture1.jpg”,
“size”: 902604,
“url”: “http:\/\/example.org\/files\/picture1.jpg”,
“thumbnailUrl”: “http:\/\/example.org\/files\/thumbnail\/picture1.jpg”,
“deleteUrl”: “http:\/\/example.org\/files\/picture1.jpg”,
“deleteType”: “DELETE”
},
{
“name”: “picture2.jpg”,
“size”: 841946,
“url”: “http:\/\/example.org\/files\/picture2.jpg”,
“thumbnailUrl”: “http:\/\/example.org\/files\/thumbnail\/picture2.jpg”,
“deleteUrl”: “http:\/\/example.org\/files\/picture2.jpg”,
“deleteType”: “DELETE”
}
]}
需要生成二维数组然后转成所需要的json数据然后返回。