[TOC] # 多文件上传插件（bootstrap-fileinput） ## 一、插件介绍 文件上传控件bootstrap-fileinput的使用 https://www.cnblogs.com/parker-yu/p/7207071.html JS组件系列——Bootstrap文件上传组件：bootstrap fileinput https://www.cnblogs.com/landeanfen/p/5007400.html 源码以及API地址： bootstrap-fileinput源码：https://github.com/kartik-v/bootstrap-fileinput bootstrap-fileinput在线API：http://plugins.krajee.com/file-input bootstrap-fileinput Demo展示：http://plugins.krajee.com/file-basic-usage-demo ## 二、整合TP5 ### 1、插件位置 ~~~ static\admin\plugins\bootstrap-fileinput ~~~ ### 2、引入文件 ~~~ <input id="file-zh" name="file-zh[]" type="file" multiple> <link href="__ADMIN__/plugins/bootstrap-fileinput/css/fileinput.css" media="all" rel="stylesheet" type="text/css" /> <script src="__ADMIN__/plugins/bootstrap-fileinput/js/fileinput.js" type="text/javascript"></script> <script src="__ADMIN__/plugins/bootstrap-fileinput/js/locales/zh.js" type="text/javascript"></script> ~~~ 注意：__ADMIN__路径解析不一定正确 > 初始化 ~~~ <script type="text/javascript" > $('#file-zh').fileinput({ language: 'zh', uploadUrl: '#', allowedFileExtensions: ['jpg', 'png', 'gif'], }); </script> ~~~ ### 3、修改common.php 位置：\application\admin\common.php ~~~ function downfiles($fieldinfo){ //字段名 $field = $fieldinfo['field']; $url = url('upload_downfiles'); //反序列化设置项 $setting = unserialize($fieldinfo['setting']); $allowext = $setting['allowext']; //zip|rar $maxnumber = $setting['maxnumber']; //字符串格式调整 $allowext = str_replace("|","','",$allowext); $allowext = "'" . $allowext . "'"; $str = <<<EOF <input type="text" id="info_$field" name="info[$field]" class="input-large form-control"> <input id="file-zh" name="file[]" type="file" multiple> <link href="__ADMIN__/plugins/bootstrap-fileinput/css/fileinput.css" media="all" rel="stylesheet" type="text/css" /> <script src="__ADMIN__/plugins/bootstrap-fileinput/js/fileinput.js" type="text/javascript"></script> <script src="__ADMIN__/plugins/bootstrap-fileinput/js/locales/zh.js" type="text/javascript"></script> <script type="text/javascript" > $('#file-zh').fileinput({ language: 'zh', uploadUrl: '$url', allowedFileExtensions: [$allowext], uploadAsync: true, //异步上传 maxFileCount: $maxnumber }); $('#file-zh').on("fileuploaded", function(event, data, previewId, index){ var images_value = $('#info_$field').val()=='' ? '' : $('#info_$field').val() + ','; $('#info_$field').val( images_value + data.response); $('#file-zh').val(''); }); </script> EOF; return $str; } ~~~ ### 4、修改控制器 位置：\application\admin\Content.php ~~~ //多文件上传 public function upload_downfiles(){ $files = request()->file('file'); foreach ($files as $file) { $info = $file->move(ROOT_PATH . 'public/uploads'); if($info) { return json_encode($info->getSaveName()); } } } ~~~ ## 三、完善Bootstrap fileinput插件功能 ### （一）上传乱码-升级插件 #### 1、修改js 位置：static\admin\plugins\bootstrap-fileinput\js\fileinput.js 行数： ~~~ 353：增加tRar 454：tRar = '<div class="kv-preview-data file-preview-other-frame">\n' + $h.DEFAULT_PREVIEW + '\n</div>\n'; 496：rar: tRar, 499：allowedPreviewTypes: ['image', 'html', 'text', 'video', 'audio', 'flash', 'pdf', 'rar', 'object'], 510：rar: {width: "160px", height: "160px"}, 522：rar: vDefaultDim, 551：rar: function (vType, vName) { return $h.compare(vType, 'application/octet-stream', true) || $h.compare(vName, /\.(rar|zip)$/i); }, 3634：'rar': 'rar', ~~~ ### （二）删除功能 #### 1、自定义文件属性 ~~~ $('#'+previewId).attr('studyfox_img',data.response); 上传文件函数 $('#file-zh').on("fileuploaded", function(event, data, previewId, index){ var images_value = $('#info_$field').val()=='' ? '' : $('#info_$field').val() + ','; $('#info_$field').val( images_value + data.response); $('#file-zh').val(''); //在当前图片DIV里添加图片地址 $('#'+previewId).attr('studyfox_img',data.response); }); ~~~ #### 2、回调函数 思路：与多图上传类似 ~~~ $delete_url = url('delete_file'); //删除文件 $('#file-zh').on("filesuccessremove", function(event, id){ var img_src = $('#'+id).attr('studyfox_img'); //后台删除文件 $.ajax({ url: '$delete_url', type: 'POST', data: {'img': img_src}, success: function(result, textStatus){ //图片删除成功后移除文本框图片信息，三种情况 ,号位置在前 后 或没有,号 var images_value = $('#info_$field').val();//隐藏文本框的值 images_value = images_value.replace(img_src+',', ''); //替换,号在右边 images_value = images_value.replace(','+img_src, ''); //替换,号在左边 images_value = images_value.replace(img_src, ''); //直接替换 //重新赋值 $('#info_$field').val(images_value); }, error: function(XMLHttpRequest, textStatus){ layer.alert('删除失败!', {icon:2}); } }); }); ~~~ #### 3、控制器处理 ~~~ //删除文件或图片 public function delete_file(){ $delete_url = input('img'); try { unlink(ROOT_PATH . 'public/uploads/' . $delete_url); //删除成功返回1 } catch (Exception $e) { } } ~~~