tp6+plupload批量上传使用记录
plupload是一个前端强大的图片上传的工具，记录下操作方式：
NO1：首先提供个下载地址，包括 js,css,swf文件相关：
链接: https://pan.baidu.com/s/1zUOUnBBrna7u-5zp-JcHbw 提取码: dea6
NO2：解压到tp6项目的资源文件目录static下，开始处理页面相关：
a：引入相关文件如下
<script type="text/javascript" src="/static/js/plupload.min.js"></script>
<script type="text/javascript" src="/static/js/jquery.plupload.queue.min.js"></script>
<link rel="stylesheet" href="/static/css/plupload.queue.css" type="text/css" />
<div id="upload_field">
<form id="upload_photos_form" method="post" action="/Upload/save">
<div id="muilti_uploader">
</div>
<div align="center"><input type="button" name="uploadbtn" class="ylbtn" value="立即提交" /></div>
</form>
</div>
b：先做一波多语言操作：此处汉化下，（关于多语言处理方式已经有文章说明，此处不过多介绍）
<script>
$(function(){//此处照搬的一个图片上传项目
plupload.addI18n({
'Filename' : '{:lang('filename')}',
'Status' : '{:lang('status')}',
'Size' : '{:lang('size')}',
'Add files' : '{:lang('add_file')}',
'Stop current upload' : '{:lang('stop_upload')}',
'Start uploading queue' : '{:lang('start_upload')}',
'Start upload' : '{:lang('start_upload')}',
'Uploaded %d/%d files':'{:lang('upload_status')}',
'Drag files here.' : '{:lang('drag_file_here')}'
});
});
</script>
c：调用处理如下，同样放入到b的function()内执行：
$("#muilti_uploader").pluploadQueue({
runtimes : 'html5,flash',
url : '/Upload/process', //此处为上传处理接口
max_file_size : '1.5mb', //设置允许上传图片大小
chunk_size : '1.5mb',
unique_names : false,
flash_swf_url : '/static/swf/plupload.flash.swf'
});
var uploader = $('#muilti_uploader').pluploadQueue();
d：上传情况监测：
if(uploader){
uploader.bind('UploadProgress', function() {
if (uploader.total.uploaded == uploader.files.length && usubmited == 0){
// setTimeout(function(){
// $('#upload_photos_form').submit();
// },200);
}
});
$('#upload_photos_form').find('input[name="uploadbtn"]').click(function(e) {
if (uploader.total.uploaded == 0) {
if (uploader.files.length > 0) {
uploader.start();
} else {
alert("注意：请选择至少一个文件！");
}
}
});
}
NO4：开始处理后端数据相关:
a：控制器Upload内创建方法process，TP6文件上传与TP5有点差异的说，头部需引用
use think\facade\Filesystem;
public function object2array($object)
{
$array = array();
if (is_object($object)) {
foreach ($object as $key => $value) {
$array[$key] = $value;
}
} else {
$array = $object;
}
return $array;
}
public function process(){
$file = request()->file('file');
//获取上传图片的对象
if (empty($file)) {
$data = array( //仿照图片项目返回的数据
'jsonrpc'=>'2.0',
'error'=>array(
'code'=> 1,
'message'=>'上传文件不能为空'
),
'id'=>'id');
echo json_encode($data);
exit;
}
$a_file = $this->object2array($file); //对象转数组
$ck_ret = validate(['image'=>'filesize:204800|fileExt:jpg,png,gif,jpeg'])->check($a_file);//限制大小200kb
if (!$ck_ret) {
//上传错误
$error = $file->getError();
$data = array(
'jsonrpc'=>'2.0',
'error'=>array(
'code'=> 1,
'message'=>$error
),
'id'=>'id');
echo json_encode($data);
} else {
//拼接图片的访问路径
$img = '/'.Filesystem::disk('public')->putFile('uploads', $file);
$img = str_replace('\\', '/', $img);
$data = array('jsonrpc'=>'2.0','result'=>null,'id'=>'id');
echo json_encode($data);
}
}