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之第八天
Oct 09 PHP
使用 php4 加速 web 传输
Oct 09 PHP
PHP 获取远程文件大小的3种解决方法
Jul 11 PHP
非常好用的Zend Framework分页类
Jun 25 PHP
ThinkPHP模板之变量输出、自定义函数与判断语句用法
Nov 01 PHP
smarty自定义函数htmlcheckboxes用法实例
Jan 22 PHP
Yii多表联合查询操作详解
Jun 02 PHP
PHP简单实现合并2个数字键数组值的方法
May 30 PHP
PHP获取redis里不存在的6位随机数应用示例【设置24小时过时】
Jun 07 PHP
php+mysql开发的最简单在线题库(在线做题系统)完整案例
Mar 30 PHP
PHP的JSON封装、转变及输出操作示例
Sep 27 PHP
Mac系统下搭建Nginx+php-fpm实例讲解
Dec 15 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
PHP获取php,mysql,apche的版本信息示例代码
2014/01/16 PHP
php获取用户浏览器版本的方法
2015/01/03 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
JavaScript中的noscript元素属性位置及作用介绍
2013/04/11 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
2013/05/13 Javascript
Jquery数字上下滚动动态切换插件
2015/08/08 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
2016/11/06 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
2017/10/26 Javascript
node下使用UglifyJS压缩合并JS文件的方法
2018/03/07 Javascript
使用vue2.0创建的项目的步骤方法
2018/09/25 Javascript
koa大型web项目中使用路由装饰器的方法示例
2019/04/02 Javascript
如何从头实现一个node.js的koa框架
2019/06/17 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
2019/09/10 Javascript
解决layer.confirm选择完之后消息框不消失的问题
2019/09/16 Javascript
利用Python3分析sitemap.xml并抓取导出全站链接详解
2017/07/04 Python
Python编程argparse入门浅析
2018/02/07 Python
Python实现的简单计算器功能详解
2018/08/25 Python
详解Python的循环结构知识点
2019/05/20 Python
在 Python 中接管键盘中断信号的实现方法
2020/02/04 Python
Python Tornado实现WEB服务器Socket服务器共存并实现交互的方法
2020/05/26 Python
Python图像处理二值化方法实例汇总
2020/07/24 Python
用pip给python安装matplotlib库的详细教程
2021/02/24 Python
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
2013/01/06 HTML / CSS
Boden英国官网:英国知名原创时装品牌
2018/11/06 全球购物
荷兰最大的儿童服装店:The Kids Republic
2019/04/13 全球购物
安踏官方商城:anta.cn
2019/12/16 全球购物
Java基础面试题
2014/07/19 面试题
幼儿园园长岗位职责
2013/11/26 职场文书
会计求职信范文
2014/05/24 职场文书
2014年财务工作总结范文
2014/11/11 职场文书
2014年村党支部工作总结
2014/12/04 职场文书
OpenCV3.3+Python3.6实现图片高斯模糊
2021/05/18 Python
Python基础之元组与文件知识总结
2021/05/19 Python
python基础入门之普通操作与函数(三)
2021/06/13 Python
一文带你探究MySQL中的NULL
2021/11/11 MySQL
Javascript中async与await的捕捉错误详解
2022/03/03 Javascript