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 相关文章推荐
fetchAll()与mysql_fetch_array()的区别详解
Jun 05 PHP
解析php curl_setopt 函数的相关应用及介绍
Jun 17 PHP
PHP中mb_convert_encoding与iconv函数的深入解析
Jun 21 PHP
php中运用http调用的GET和POST方法示例
Sep 29 PHP
php通过curl模拟登陆DZ论坛
May 11 PHP
php中memcache 基本操作实例
May 17 PHP
PHP框架性能测试报告
May 08 PHP
PHP删除二维数组中相同元素及数组重复值的方法示例
May 05 PHP
Docker搭建自己的PHP开发环境
Feb 24 PHP
PHP封装的完整分页类示例
Aug 21 PHP
PHP实现数组和对象的相互转换操作示例
Mar 20 PHP
使用PHPWord生成word文档的方法详解
Jun 06 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
PHP5中的时间相差8小时的解决办法
2008/03/28 PHP
不要轻信 PHP_SELF的安全问题
2009/09/05 PHP
PHP使用NuSOAP调用Web服务的方法
2015/07/18 PHP
分享微信扫码支付开发遇到问题及解决方案-附Ecshop微信支付插件
2015/08/23 PHP
php输出反斜杠的实例方法
2019/09/19 PHP
Laravel Eloquent ORM 实现查询表中指定的字段
2019/10/17 PHP
jQuery autocomplate 自扩展插件、自动完成示例代码
2011/03/28 Javascript
JS中判断null、undefined与NaN的方法
2014/03/24 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
2014/06/03 Javascript
JavaScript列表框listbox全选和反选的实现方法
2015/03/18 Javascript
浅谈Jquery核心函数
2015/06/18 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
2017/04/27 jQuery
vue修改vue项目运行端口号的方法
2017/08/04 Javascript
JavaScript递归算法生成树形菜单
2017/08/15 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
2017/10/30 Javascript
浅谈vue项目重构技术要点和总结
2018/01/23 Javascript
Vue父组件调用子组件事件方法
2018/02/23 Javascript
微信小程序form表单组件示例代码
2018/07/15 Javascript
微信小程序实现默认第一个选中变色效果
2018/07/17 Javascript
JavaScript简单实现的仿微博留言功能示例
2019/01/17 Javascript
VSCode插件安装完成后的配置(常用配置)
2020/08/24 Javascript
在Lighttpd服务器中运行Django应用的方法
2015/07/22 Python
使用Python神器对付12306变态验证码
2016/01/05 Python
python 递归遍历文件夹,并打印满足条件的文件路径实例
2017/08/30 Python
基于python中pygame模块的Linux下安装过程(详解)
2017/11/09 Python
Python实现ping指定IP的示例
2018/06/04 Python
Python使用gRPC传输协议教程
2018/10/16 Python
在自动化中用python实现键盘操作的方法详解
2019/07/19 Python
Python PyQt5模块实现窗口GUI界面代码实例
2020/05/12 Python
python使用正则表达式匹配txt特定字符串(有换行)
2020/12/09 Python
网易微博Web App用HTML5开发的过程介绍
2012/06/13 HTML / CSS
Kent & Curwen:与大卫·贝克汉姆合作
2017/06/13 全球购物
尊老爱幼演讲稿
2014/09/04 职场文书
爱国电影观后感
2015/06/19 职场文书
2019个人工作自我评价范文(3篇)
2019/09/19 职场文书
MySQL count(*)统计总数问题汇总
2022/09/23 MySQL