这篇文章主要介绍了Thinkphp5+plupload实现的图片上传功能,结合具体实例形式分析了thinkPHP5结合plupload实现可支持实时预览的图片上传功能相关操作技巧,需要的朋友可以参考下
本文实例讲述了Thinkphp5+plupload实现支持实时预览的图片上传功能。分享给大家供大家参考，具体如下：
今天和大家分享一个国外的图片上传插件，这个插件支持分片上传大文件。其中著名的七牛云平台的jssdk就使用了puupload插件，可见这个插件还是相当牛叉的。
这个插件不仅仅支持图片上传，还支持大多数文件的上传，例如视频文件，音频文件，word文件等等，而且大文件都采用分片上传的机制。
Plupload有以下功能和特点：
1、拥有多种上传方式：HTML5、flash、silverlight以及传统的。Plupload会自动侦测当前的环境，选择最合适的上传方式，并且会优先使用HTML5的方式。所以你完全不用去操心当前的浏览器支持哪些上传方式，Plupload会自动为你选择最合适的方式。
2、支持以拖拽的方式来选取要上传的文件
3、支持在前端压缩图片，即在图片文件还未上传之前就对它进行压缩
4、可以直接读取原生的文件数据，这样的好处就是例如可以在图片文件还未上传之前就能把它显示在页面上预览
5、支持把大文件切割成小片进行上传，因为有些浏览器对很大的文件比如几G的一些文件无法上传。
下面就介绍一个tp5整合plupload图片上传插件的小案例，希望给大家带来一点小帮助。
一、案例目录结构
二、Index.php控制器方法
request->root(true); //ROOT域名 $rootUrl = explode('index.php',$rootUrl)[0]; //模板资源变量分配 foreach (config('TMPL_PARSE_STRING') as $key => $value) { $this->view->assign('_'.$key,$rootUrl.$value); } return $this->fetch(); } //图片上传方法 public function upload_images(){ if($this->request->isPost()){ //接收参数 $images = $this->request->file('file'); //计算md5和sha1散列值，TODO::作用避免文件重复上传 $md5 = $images->hash('md5'); $sha1= $images->hash('sha1'); //判断图片文件是否已经上传 $img = Db::name('picture')->where(['md5'=>$md5,'sha1'=>$sha1])->find();//我这里是将图片存入数据库，防止重复上传 if(!empty($img)){ return json(['status'=>1,'msg'=>'上传成功','data'=>['img_id'=>$img['id'],'img_url'=>$this->request->root(true).'/'.$img['path']]]); }else{ // 移动到框架应用根目录/public/uploads/picture/目录下 $imgPath = 'public' . DS . 'uploads' . DS . 'picture'; $info = $images->move(ROOT_PATH . $imgPath); $path = 'public/uploads/picture/'.date('Ymd',time()).'/'.$info->getFilename(); $data = [ 'path' => $path , 'md5' => $md5 , 'sha1' => $sha1 , 'status' => 1 , 'create_time' => time() , ]; if($img_id=Db::name('picture')->insertGetId($data)){ return json(['status'=>1,'msg'=>'上传成功','data'=>['img_id'=>$img_id,'img_url'=>$this->request->root(true).'/'.$path]]); }else{ return json(['status'=>0,'msg'=>'写入数据库失败']); } } }else{ return ['status'=>0,'msg'=>'非法请求!']; } } }
三、index.html页面
<title>tp5+plupload图片上传</title> <!-- production --><!-- debug--> ul{ list-style:none; } #file-list {overflow: hidden;padding-left: initial;} #file-list li { width:160px; float: left; height:200px; position: relative; height: inherit; margin-bottom: inherit; } #file-list li a { width:150px; height:150px; text-align: center; display: flex; align-items: center; justify-content: center; margin:0 auto; border:1px solid #ccc; padding: 5px 5px 5px 5px; } .clo<p style="color:transparent">来源gao!daima.com搞$代!码网</p>se{ background-image: url("{$_plupload}/close.png-600"); width: 30px; height: 30px; background-size: contain; position: absolute; right: 2%; top: 0; } #file-list li a img {max-width:100%;max-height: 100%;} .progress{ position: absolute; background-color: rgba(4, 4, 4, 0.53); color: #fff; padding: 3px 3px 3px 3px; border-radius: 10%; } <div id="container"> <button class="btn btn-primary" type="button" id="pickfiles" style="height: 30px;line-height: 8px">选择图片</button><button class="btn btn-primary" type="button" id="uploadfiles">开始上传</button><ul id="file-list"> </ul></div>
如果想研究插件源码的朋友，可以看这个文件，其中大部分都已经注释了。
最终效果就是这样了。
如果对tp5不太熟悉的朋友，建议直接配置虚拟域名，将项目目录绑定到/tp5/public/目录。
案例源码：https://github.com/BlueSimle/thinkphp5-plupload (如果对你有帮助，请给个star哦。如果有什么疑问，请留言)
更多关于thinkPHP相关内容感兴趣的读者可查看本站专题：《ThinkPHP入门教程》、《thinkPHP模板操作技巧总结》、《ThinkPHP常用方法总结》、《codeigniter入门教程》、《CI(CodeIgniter)框架进阶教程》、《Zend FrameWork框架入门教程》及《PHP模板技术总结》。
希望本文所述对大家基于ThinkPHP框架的PHP程序设计有所帮助。
以上就是Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】的详细内容，更多请关注gaodaima搞代码网其它相关文章！
转载请注明原文链接：Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】
