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 相关文章推荐
用IE远程创建Mysql数据库的简易程序
Oct 09 PHP
用PHP开发GUI
Oct 09 PHP
PHP 的几个配置文件函数
Dec 21 PHP
elgg 获取文件图标地址的方法
Mar 20 PHP
php数组函数序列之in_array() 查找数组值是否存在
Oct 29 PHP
PHP获取本周第一天和最后一天示例代码
Feb 24 PHP
PHP实现单例模式最安全的做法
Jun 13 PHP
jQuery+PHP实现的掷色子抽奖游戏实例
Jan 04 PHP
PHP实现的json类实例
Jul 28 PHP
浅谈PHP中如何实现Hook机制
Nov 14 PHP
PHP实现的折半查找算法示例
Dec 19 PHP
TP3.2框架分页相关实现方法分析
Jun 03 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自动识别字符集并完成转码详解
2013/08/02 PHP
php使用smtp发送支持附件的邮件示例
2014/04/13 PHP
微信自定义分享php代码分析
2016/11/24 PHP
基于Laravel-admin 后台的自定义页面用法详解
2019/09/30 PHP
基于jquery的15款幻灯片插件
2011/04/10 Javascript
Js参数值中含有单引号或双引号问题的解决方法
2013/11/06 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
2013/12/05 Javascript
jQuery中DOM树操作之复制元素的方法
2015/01/23 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
2015/05/06 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
2015/12/30 Javascript
基于Bootstrap3表格插件和分页插件实例详解
2016/05/17 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
2017/03/14 Javascript
Vue-cli中为单独页面设置背景色的实现方法
2018/02/11 Javascript
angular 用Observable实现异步调用的方法
2018/12/27 Javascript
vue Element左侧无限级菜单实现
2020/06/10 Javascript
python数据结构树和二叉树简介
2014/04/29 Python
举例讲解Linux系统下Python调用系统Shell的方法
2015/11/07 Python
python安装PIL模块时Unable to find vcvarsall.bat错误的解决方法
2016/09/19 Python
详解Python读取配置文件模块ConfigParser
2017/05/11 Python
Python中的TCP socket写法示例
2018/05/11 Python
python实现桌面壁纸切换功能
2019/01/21 Python
css3气泡 css3关键帧动画创建的动态通知气泡
2013/02/26 HTML / CSS
css3实现背景图片拉伸效果像桌面壁纸一样
2013/08/19 HTML / CSS
美国和加拿大房车出售在线分类广告:RVT.com
2018/04/23 全球购物
高中数学教师求职信
2013/10/30 职场文书
机械工程师的岗位职责
2013/11/17 职场文书
优秀社区干部事迹材料
2014/02/03 职场文书
进步之星获奖感言
2014/02/22 职场文书
主题班会演讲稿
2014/05/22 职场文书
战略合作意向书
2014/07/29 职场文书
部门优秀员工推荐信
2015/03/24 职场文书
2015年语文教学工作总结
2015/05/25 职场文书
青春雷锋观后感
2015/06/10 职场文书
初中团支书竞选稿
2015/11/21 职场文书
浅谈Python numpy创建空数组的问题
2021/05/25 Python
利用Python实时获取steam特惠游戏数据
2022/06/25 Python