一、概述
plupload是一个基于Flash、Silverlight和HTML5文件上传的JavaScript控件。本文将介绍如何使用plupload插件来实现ThinkPHP5框架中的图片批量上传功能。
二、环境准备
1. 安装ThinkPHP5框架,以及相关依赖包。
2. 下载plupload插件(http://www.plupload.com/)。
三、实现步骤
1. 将plupload插件引入项目中,建议将其放置在public目录下。
示例代码(假设plupload存放在public/static/plupload/目录下):
```
```
2. 编写模板页面代码,创建上传按钮并指定文件上传的地址,同时指定后端处理上传的方法,该方法在控制器中实现。
示例代码:
```
您的浏览器不支持Flash、Silverlight或HTML5文件上传。
$(function () {
var uploader = new plupload.Uploader({
browse_button: 'uploader', //指定上传按钮
url: "{:url('upload/upload')}", //指定处理上传地址
flash_swf_url: '/static/plupload/Moxie.swf', //指定flash文件地址
silverlight_xap_url: '/static/plupload/Moxie.xap', //指定silverlight文件地址
multi_selection: true, //允许多文件上传
});
uploader.init();
});
```
注意:代码中的“uploader”是一个div元素的id,指定为文件上传按钮。同时,注意指定flash文件和silverlight文件的地址。
3. 在控制器中处理上传文件。创建一个Upload控制器,在该控制器中创建upload方法来处理文件上传。在upload方法中,我们需要通过图片上传的多种方式来获取文件及其相关数据,包括文件大小、文件类型、文件名称等。
示例代码:
```
namespace app\index\controller;
use think\Controller;
use think\Request;
use think\File;
class Upload extends Controller
{
public function upload()
{
$request = Request::instance();
$file = $request->file('file');
// 移动到/public/uploads/ 目录下
$info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
if($info){
echo $info->getFilename();
}else{
echo $file->getError();
}
}
}
```
该方法首先通过Request::instance()方法获取请求对象,然后使用该对象的file()方法获取上传的文件。接下来使用File对象保存文件,将文件保存到public/uploads/目录下,最后可以输出文件名或错误信息。
四、页面效果展示
完成上述步骤后,图片批量上传功能已经实现。打开上传页面,将鼠标移动到上传按钮上,上传框会弹出,可以选择一张或多张图片进行上传。
五、总结
使用plupload插件实现ThinkPHP5框架中图片批量上传功能,可以通过引入plupload并编写相关代码来实现。需要注意的是,在实现过程中需要在控制器中处理上传文件,同时注意文件上传的方式和路径设置。