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

ThinkPHP  /  管理员 发布于 8年前   207

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

    
  选择图片  开始上传  
  

　　

如果想研究插件源码的朋友，可以看这个文件，其中大部分都已经注释了。

最终效果就是这样了。

 

如果对tp5不太熟悉的朋友，建议直接配置虚拟域名，将项目目录绑定到/tp5/public/目录。

案例源码：https://github.com/BlueSimle/thinkphp5-plupload  (如果对你有帮助，请给个star哦。如果有什么疑问，请留言)

更多关于thinkPHP相关内容感兴趣的读者可查看本站专题：《ThinkPHP入门教程》、《thinkPHP模板操作技巧总结》、《ThinkPHP常用方法总结》、《codeigniter入门教程》、《CI(CodeIgniter)框架进阶教程》、《Zend FrameWork框架入门教程》及《PHP模板技术总结》。

希望本文所述对大家基于ThinkPHP框架的PHP程序设计有所帮助。

您可能感兴趣的文章:

• 基于ThinkPHP5.0实现图片上传插件
• ThinkPHP5+Layui实现图片上传加预览功能
• thinkPHP5框架整合plupload实现图片批量上传功能的方法
• ThinkPHP5.0 图片上传生成缩略图实例代码说明
• thinkphp5上传图片及生成缩略图公共方法(分享)
• UEditor编辑器自定义上传图片或文件路径的修改方法
• ueditor编辑器不能上传图片问题的解决方法
• 关于UEditor编辑器远程图片上传失败的解决办法
• 百度ueditor组件上传图片后如何设置img里的alt属性
• PHP结合Ueditor并修改图片上传路径
• YII中Ueditor富文本编辑器文件和图片上传的配置图文教程
• ThinkPHP5+UEditor图片上传到阿里云对象存储OSS功能示例