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($info as$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数据然后返回。