thinkphp5 框架结合plupload实现图片批量上传功能示例
本文实例讲述了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相关内容感兴趣的读者可查看本站专题：《ThinkPHP入门教程》、《thinkPHP模板操作技巧总结》、《ThinkPHP常用方法总结》、《codeigniter入门教程》、《CI(CodeIgniter)框架进阶教程》、《Zend FrameWork框架入门教程》及《PHP模板技术总结》。
希望本文所述对大家基于ThinkPHP框架的PHP程序设计有所帮助。
您可能感兴趣的文章:Spring-boot结合Shrio实现JWT的方法JAVA集合框架Map特性及实例解析TP5框架实现一次选择多张图片并预览的方法示例yii框架结合charjs统计上一年与当前年数据的方法示例yii框架结合charjs实现统计30天数据的方法TP5框架实现上传多张图片的方法分析Apache Shrio安全框架实现原理及实例详解
