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

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

在extend目录下新增目录uploader，并新建类uploads

<?phpnamespace uploader; class uploads { public static function upfile($file, $path = 'images', $add_domain = fal) {  $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];   } el {    $res = ['errno' => 1, 'errmsg' => $ext];   }  } el {   $res = ['errno' => 1, 'errmsg' => '请选择图片！'];  }    return $res; }}?>

使用

<?php namespace app\backend\controller; u think\controller;u think\request;u 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($_rver['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_lection = fal;  var inputfield = el.find('input[type=hidden]');  // 是否多文件上传  if(elbtn.attr('data-multiple') == 'multiple') {   multi_lection = true;  }  // 上传目录  var upload_path = inputfield.attr('upload-path');  var uploader = new plupload.uploader({   runtimes : 'html5,flash,silverlight,html4',   brow_button : elbtn.attr('data-id') + '_uploader',    multi_lection: multi_lection,   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 : fal //不允许选取重复文件   },    init: {     postinit: function() {},     beforeupload: function(up, file) {     up.toption('multipart_params', {'updir': upload_path})    },     filesadded: function(up) {     up.start(); //选择完后直接上传    },     fileuploaded: function(up, file, info) {     if (info.status == 200)     {      var file_type = file.t寻雾启事ype;      var is_image = file_type.indexof('image');      var is_video = file_type.indexof('video');      // 解析返回的数据薛宝钗      var result = json.par(info.respon);      var img_list = "";      if(result.errno == 0) {       // 返回的图片上传结果       var file_name = result.data;        if(multi_lection) {        // 多图片上传不考虑视频        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>";         }        }       } el {        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);      } el {       alert(result.errmsg);      }     }     el     {      alter(info.respon);     }     },     error: function(up, err) {     alert(err.respon);    }   }  })  uploader.init();    // 删除  if (multi_lection) {   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_im夸孩子的话age_files = new array();    if (image_files != '') {     new_image_files = image_files;    } el {     new_image_files = $.parjson(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));   });  } el {   el.on('click', '.delete-image', function(){    // 显示值为空    v法人变更申请书ar 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)     }    });   });  } })})