您现在的位置是：网站首页> 编程资料编程资料

Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】_php实例_

2023-05-25 380人已围观

简介 Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】_php实例_

本文实例讲述了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页面