thinkphp5 框架结合plupload实现图片批量上传功能示例


Posted in PHP onApril 04, 2020

本文实例讲述了thinkphp5 框架结合plupload实现图片批量上传功能。分享给大家供大家参考,具体如下:

在extend目录下新增目录uploader,并新建类Uploads

<?php
namespace uploader;
 
class Uploads {
 public static function upfile($file, $path = 'images', $add_domain = false) {
  $res = ['errno' => 1, 'errmsg' => '上传图片错误'];
  $data = '';
  if(!empty($file)) {
   // 上传根目录
   $file_path = 'uploads/';
   // 如果传了路径过来,则加入路径
   if(!empty($path)) {
    $file_path .= $path .'/';
   }
   if (!file_exists($file_path)) {
    @mkdir($file_path);
   }
   // 上传
   $info = $file->move($file_path);
   // 获取后缀
   $ext = strtolower($info->getExtension());
   //判断后缀是否合法
   $exts = ['jpg', 'png', 'gif', 'jpeg', 'mp4', 'avi', '3gp'];
   if(in_array($ext, $exts)) {
    $save_name = $info->getSaveName();
    $save_path = "/" . $file_path . $save_name;
    if($add_domain) {
     $save_path = "http://www.localhost.com/" . $file_path . $save_name;
    } 
    $res = ['errno' => 0, 'data' => $save_path];
   } else {
    $res = ['errno' => 1, 'errmsg' => $ext];
   }
  } else {
   $res = ['errno' => 1, 'errmsg' => '请选择图片!'];
  }
  
  return $res;
 }
}
?>

使用

<?php
 
namespace app\backend\controller;
 
use think\Controller;
use think\Request;
use uploader\Uploads;
 
class Upload extends Controller
{
 public function upload(Request $request) {
  $files = $request->file("file");
  $updir = $request->post('updir');
  $res = Uploads::upfile($files, $updir);
  return json_encode($res);
 }
 
 public function del_upload(Request $request) {
  $res = ['errno' => 1, 'errmsg' => '删除失败'];
  $filename = $request->post('filename');
  if(!empty($filename)) {
   @unlink($_SERVER['DOCUMENT_ROOT'] . $filename);
   $res = ['errno' => 0, 'errmsg' => $filename];
  }
  return json_encode($res);
 }
 
}
 
?>

前端js

var image_files = new Array(); // 多图片上传临时保存
$(document).ready(function() {
 $('.media-picker').each(function() {
  var el = $(this);
  var elbtn = el.find('.media-picker-button');
  var multi_selection = false;
  var inputField = el.find('input[type=hidden]');
  // 是否多文件上传
  if(elbtn.attr('data-multiple') == 'multiple') {
   multi_selection = true;
  }
  // 上传目录
  var upload_path = inputField.attr('upload-path');
  var uploader = new plupload.Uploader({
   runtimes : 'html5,flash,silverlight,html4',
   browse_button : elbtn.attr('data-id') + '_uploader', 
   multi_selection: multi_selection,
   auto_start: true,
   flash_swf_url : '../plugins/plupload/js/Moxie.swf',
   silverlight_xap_url : '../plugins/plupload/js/Moxie.xap',
   url : '/backend/upload',
   
   filters: {
    mime_types : [ //只允许上传图片和zip,rar文件
    { title : "Image files", extensions : "jpg,jpeg,gif,png,bmp" }, 
    { title : "Video files", extensions : "mp4,3gp" }
    ],
    max_file_size : '10mb', //最大只能上传10mb的文件
    prevent_duplicates : false //不允许选取重复文件
   },
 
   init: { 
    PostInit: function() {},
 
    BeforeUpload: function(up, file) {
     up.setOption('multipart_params', {'updir': upload_path})
    },
 
    FilesAdded: function(up) {
     up.start(); //选择完后直接上传
    },
 
    FileUploaded: function(up, file, info) {
     if (info.status == 200)
     {
      var file_type = file.type;
      var is_image = file_type.indexOf('image');
      var is_video = file_type.indexOf('video');
      // 解析返回的数据
      var result = JSON.parse(info.response);
      var img_list = "";
      if(result.errno == 0) {
       // 返回的图片上传结果
       var file_name = result.data; 
       if(multi_selection) {
        // 多图片上传不考虑视频
        if (is_image > -1) {
         // 存入临时数组
         image_files.push(file_name);
         inputField.val(JSON.stringify(image_files));
         for (var i = 0; i < image_files.length; i++) {
          img_list += "<li><img src='"+image_files[i]+"' /><span class='delete-image'>✖</span><p>"+image_files[i]+"</p></li>";
         }
        }
       } else {
        inputField.val(file_name);
        if (is_image > -1) {
         img_list = "<li><img src='"+result.data+"' /><span class='delete-image'>✖</span><p>"+result.data+"</p></li>";
        }
        if (is_video > -1) { 
         img_list = "<li><video controls src='"+result.data+"'></video><span class='delete-image'>✖</span><p>"+result.data+"<p></li>";
        }
       }
       el.find('.image-list').html(img_list);
      } else {
       alert(result.errmsg);
      }
     }
     else
     {
      alter(info.response);
     } 
    },
 
    Error: function(up, err) {
     alert(err.response);
    }
   }
  })
  uploader.init();
 
 
  // 删除
  if (multi_selection) {
   el.on('click', '.delete-image', function() {
    var file_name = inputField.val();
    var elDel = $(this);
    // 得到filename
    var current_file_name = elDel.next('p').html();
    // 删除当前的父级li
    elDel.parent().remove();
    // 重新赋值数组
    var new_image_files = new Array();
    if (image_files != '') {
     new_image_files = image_files;
    } else {
     new_image_files = $.parseJSON(file_name);
    }
    // 去掉数组中的当前值
    for(var i in new_image_files) {
     if(new_image_files[i] == current_file_name) {
      new_image_files.splice(i,1);
      break;
     }
    }
    $.ajax({
      type: "POST",
      url: "/backend/del_upload",
      data: "filename=" + current_file_name,
      success: function(msg) {
        console.log(msg)
      }
    });
    inputField.val(JSON.stringify(new_image_files));
   });
  } else {
   el.on('click', '.delete-image', function(){
    // 显示值为空
    var file_name = inputField.val();
    el.find('.image-list').html('');
    inputField.val('');
    $.ajax({
     type: "POST",
     url: "/backend/del_upload",
     data: "filename=" + file_name,
     success: function(msg) {
       console.log(msg)
     }
    });
   });
  }
 })
})

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

PHP 相关文章推荐
php获得文件扩展名三法
Nov 25 PHP
php下通过POST还是GET来传值
Jun 05 PHP
php面向对象全攻略 (十) final static const关键字的使用
Sep 30 PHP
php 中英文语言转换类代码
Aug 11 PHP
PHP与SQL注入攻击防范小技巧
Sep 16 PHP
PHP 通过Socket收发十六进制数据的实现代码
Aug 16 PHP
php中url函数介绍及使用示例
Feb 13 PHP
在Nginx上部署ThinkPHP项目教程
Feb 02 PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
Dec 17 PHP
PHP生成可点击刷新的验证码简单示例
May 13 PHP
Yii+MYSQL锁表防止并发情况下重复数据的方法
Jul 14 PHP
php 使用 __call实现重载功能示例
Nov 18 PHP
phpQuery采集网页实现代码实例
Apr 02 #PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
Apr 02 #PHP
php计数排序算法的实现代码(附四个实例代码)
Mar 31 #PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
Mar 30 #PHP
TP5框架实现上传多张图片的方法分析
Mar 29 #PHP
thinkphp框架无限级栏目的排序功能实现方法示例
Mar 29 #PHP
php查看一个变量的占用内存的实例代码
Mar 29 #PHP
You might like
打造计数器DIY三步曲(上)
2006/10/09 PHP
PHP7+Nginx的配置与安装教程详解
2016/05/10 PHP
NodeJS学习笔记之Connect中间件模块(二)
2015/01/27 NodeJs
使用Web Uploader实现多文件上传
2016/06/08 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
2016/10/14 Javascript
学习使用bootstrap的modal和carousel
2016/12/09 Javascript
浅谈Javascript中的Label语句
2016/12/14 Javascript
通过npm引用的vue组件使用详解
2017/03/02 Javascript
AngularJS 控制器 controller的详解
2017/10/17 Javascript
Node.js实现注册邮箱激活功能的方法示例
2018/03/23 Javascript
Layui实现数据表格默认全部显示(不要分页)
2019/10/26 Javascript
Vue的自定义组件不能使用click方法的解决
2020/07/28 Javascript
Vue filter 过滤器、以及在table中的使用介绍
2020/09/07 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
2020/10/27 Javascript
python+opencv实现动态物体识别
2018/01/09 Python
python 叠加等边三角形的绘制的实现
2019/08/14 Python
基于spring boot 日志(logback)报错的解决方式
2020/02/20 Python
python异常处理、自定义异常、断言原理与用法分析
2020/03/23 Python
基于CSS3实现的漂亮Menu菜单效果代码
2015/09/10 HTML / CSS
美国著名的家居用品购物网站:Bed Bath & Beyond
2018/01/05 全球购物
美国美食礼品篮网站:Gourmet Gift Baskets
2019/12/15 全球购物
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2014/07/21 面试题
大学生毕业自我鉴定范文
2013/09/19 职场文书
法律七进实施方案
2014/03/15 职场文书
班训口号大全
2014/06/18 职场文书
学校纪律作风整改措施思想汇报
2014/10/11 职场文书
基层党支部整改方案
2014/10/25 职场文书
谢师宴答谢词
2015/01/05 职场文书
2015年植树节活动总结
2015/02/06 职场文书
外贸英文求职信范文
2015/03/19 职场文书
入党介绍人意见2015
2015/06/01 职场文书
2016关于军训的心得体会
2016/01/11 职场文书
教您怎么制定西餐厅运营方案 ?
2019/07/05 职场文书
演讲稿之感恩老师(三篇范文)
2019/09/06 职场文书
使用Oracle跟踪文件的问题详解
2021/06/28 Oracle
Mysql如何实现不存在则插入,存在则更新
2022/03/25 MySQL