thinkphp5 结合plupload实现图片批量上传

概述本文章向大家介绍thinkphp5 结合plupload实现图片批量上传，主要包括thinkphp5 结合plupload实现图片批量上传使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

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

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;

}

}

?>

使用

namespace appbackendcontroller;

use thinkController;

use thinkRequest;

use uploaderUploads;

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)) {

@un@R_404_6862@($_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 += "✖

"+image_files[i]+"

";

}

}

} else {

inputFIEld.val(file_name);

if (is_image > -1) {

img_List = "✖

"+result.data+"

";

}

if (is_vIDeo > -1) {

img_List = "✖

"+result.data+"

";

}

}

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);

}

// 去掉数组中的当前值

new_image_files.pop(current_file_name);

$.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',function(){

// 显示值为空

var file_name = inputFIEld.val();

el.find('.image-List').HTML('');

inputFIEld.val('');

$.AJAX({

type: "POST",

data: "filename=" + file_name,

success: function(msg) {

console.log(msg)

}

});

});

}

})

})

总结

以上是内存溢出为你收集整理的thinkphp5 结合plupload实现图片批量上传全部内容，希望文章能够帮你解决thinkphp5 结合plupload实现图片批量上传所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。