这篇文章主要介绍了thinkphp5 框架结合plupload实现图片批量上传功能,结合实例形式分析了thinkphp5 框架结合plupload实现图片批量上传功能相关扩展类定义、使用及前端js等操作技巧,需要的朋友可以参考下
本文实例讲述了thinkphp5 框架结合plupload实现图片批量上传功能。分享给大家供大家参考，具体如下：
在extend目录下新增目录uploader，并新建类Uploads
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; } } ?> 使用
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 "; } } } 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); } // 去掉数组中的当前值 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程序设计有所帮助。
以上就是thinkphp5 框架结合plupload实现图片批量上传功能示例的详细内容，更多请关注0133技术站其它相关文章！
