[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) { }
}
~~~
- Layer无刷新不跳转弹框提示信息
- 整合ThinkPHP+实用代码
- TP整合Layer插件实现无刷新
- 自定义助手函数
- 添加信息失败后不跳转
- 三种无限级分类
- TP常用代码
- 自定义公共函数
- TP模型管理专题
- TP模型管理之添加模型
- sfox_newmodel.sql
- TP模型管理之删除模型
- TP模型管理之编辑模型
- TP模型管理之字段添加
- sfox_newmodel.sql_edit
- layer_hplus.js_edit
- TP模型管理之字段删除
- TP模型管理之字段编辑
- TP模型管理之预览模型
- TP模型管理之公共函数
- layer_hplus.js_修订一
- TP模型管理之预览模型静态页
- 后台内容管理系统
- 分类树显示
- 内容列表显示
- 信息发布
- 编辑信息
- layer_hplus.js
- myJs第一版
- myJs第二版
- myJs第三版
- myJs第四版
- TP5插件用法
- Datatables
- WebUploader
- bootstrap-fileinput
- UEditor
- 简单调用
- 路径问题
- 跨域多图上传
- 跨域单图上传
- UEditor图片跨域上传解决方案
- 定制工具栏图标
- ajaxFileUpload
- LayUI
- 图片上传
- layui分页
- 搜索页
- 搜索优化及删除
- Uploadify
- TP5前端应用
- 静态首页
- 前台首页功能实现
- 自定义标签库
- 前台模板继承应用
- 首页自定义标签改进
- 文章内容页
- 自定义标签改进
- 自定义标签修正
- 图片等比例自动缩放
- 后台权限管理
- 角色管理
- 规则管理
- 权限设置
- 会员管理
- 权限管理
- 前台登录注册功能
- 注册登录
- 阿里大于手机注册
- 阿里大于升级阿里云短信服务
- 自动登录完成
- PHP异位或加密实现自动登陆
- 微信开发
- 分享接口
- 静态页面实现微信分享
- 动态页微信分享
- 页面静态化
- 1-全站静态化前期配置
- 2-链接地址静态化
- TP5常用片段代码
- 加载静态资源路径与常量
- thinkphp5预定义常量
- 删除某文件夹的内容
- 解压插件包
- 异步提交插件
- 其他功能
- 背景音乐
- 手机访问PC网站自动跳转到手机网站代码
- 手机微信音乐MP3播放器
- 后盾之网页背景音乐
- 播放器宽度自适应
- 前台首页数据调用
- 视频列表
- 搜索分页
- H5解决苹果（IOS）不能自动播放音乐
- 清空缓存
- 文件处理常识
- 删除路径下的所有文件夹和文件
- 一键清空缓存
- 评论留言
- 格式化时间
- 替换微博内容的URL地址@用户与表情
- PHP正则理解
- jQuery评论插件
- TP空操作
- TP路由
- 跨域访问
- 设置请其头允许跨域请求
- 模板前台判断手机访问跳转手机网址代码
- PHP遍历一个文件夹下所有文件和子文件夹
- PHP获取视频的第一帧与时长
- TP5数据库
- 链式操作原理
- update替换字段部分内容
- 后台开发
- 后台登录页居中显示
- TP5自带验证码
- JS & JQuery专题
- 二级城市联动菜单
- 模板引擎
- 混合模板编译
- 黄永成TP微博开发
- 消息推送
- memcache安装
- 插件开发
- 插件介绍
- 插件钩子
- 浅谈初步理解钩子
- 插件钩子(hooks)分析
- 插件钩子简单理解
- 控制器调用插件
- 钩子通用处理函数
- 插件基类代码
- 插件测试代码
- 浅谈钩子与插件
- 技术综合
- 常用代码
- PHP
- 56个PHP开发常用代码片段（上）
- 56个PHP 开发常用代码片段（中）
- 56个PHP 开发常用代码片段（下）
- sublime text安装自动补全注释的插件
- 影音视频开发
- 视频
- H5视频直播扫盲
- 音乐
- 语音
- PHP实现语音播报功能
- MUI
- 窗体操作