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 相关文章推荐
用phpmyadmin更改mysql5.0登录密码
Mar 25 PHP
php 注释规范
Mar 29 PHP
php中长文章分页显示实现代码
Sep 29 PHP
php如何调用webservice应用介绍
Nov 24 PHP
学习php中的正则表达式
Aug 17 PHP
制作安全性高的PHP网站的几个实用要点
Dec 30 PHP
php生成RSS订阅的方法
Feb 13 PHP
apache和PHP如何整合在一起
Oct 12 PHP
PHP内核探索之变量
Dec 22 PHP
浅谈PHP中如何实现Hook机制
Nov 14 PHP
PHP实现的敏感词过滤方法示例
Mar 06 PHP
laravel实现Auth认证,登录、注册后的页面回跳方法
Sep 30 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日期转时间戳,指定日期转换成时间戳
2012/07/17 PHP
学习php过程中的一些注意点的总结
2013/10/25 PHP
linux下编译安装memcached服务
2014/08/03 PHP
PHP生成随机字符串(3种方法)
2015/09/25 PHP
PHP设计模式之装饰器模式定义与用法详解
2018/04/02 PHP
PHP实现将base64编码字符串转换成图片示例
2018/06/22 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
greybox——不开新窗口看新的网页
2007/02/20 Javascript
常见表单重复提交问题整理及解决方法
2013/11/13 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
2014/03/27 Javascript
javascript中的取反再取反~~没有意义
2014/04/06 Javascript
通过正则表达式获取url中参数的简单实现
2016/06/07 Javascript
自己封装的一个原生JS拖动方法(推荐)
2016/11/22 Javascript
浅谈webpack打包之后的文件过大的解决方法
2018/03/07 Javascript
使用JS代码实现俄罗斯方块游戏
2018/08/03 Javascript
在create-react-app中使用sass的方法示例
2018/10/01 Javascript
微信小程序实现多选框全选与取消全选功能示例
2019/05/14 Javascript
JS document文档的简单操作完整示例
2020/01/13 Javascript
微信小程序向Java后台传输参数的方法实现
2020/12/10 Javascript
[49:05]Newbee vs TNC 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python网络编程之TCP通信实例和socketserver框架使用例子
2014/04/25 Python
跟老齐学Python之有点简约的元组
2014/09/24 Python
python根据出生日期返回年龄的方法
2015/03/26 Python
编写Python爬虫抓取暴走漫画上gif图片的实例分享
2016/04/20 Python
用Python中的turtle模块画图两只小羊方法
2019/04/09 Python
Python搭建代理IP池实现存储IP的方法
2019/10/27 Python
利用Python校准本地时间的方法教程
2019/10/31 Python
Python socket实现的文件下载器功能示例
2019/11/15 Python
Python 过滤错误log并导出的实例
2019/12/26 Python
Dockers美国官方网站:卡其裤、男士服装、鞋及配件
2016/11/22 全球购物
Pretty Little Thing爱尔兰:时尚女性服饰
2017/03/27 全球购物
《小猪家的桃花树》教学反思
2014/04/11 职场文书
收入证明申请书
2015/06/12 职场文书
大学入学感言
2015/08/01 职场文书
SpringCloud Feign请求头删除修改的操作代码
2022/03/20 Java/Android
Mysql使用全文索引(FullText index)的实例代码
2022/04/03 MySQL