升级老项目,需要用到文件上传,找到一个基于bootstrap的文件上传插件。搜索网上也没有找到适合自己项目的文章,索性就自己写一篇。
截止发文之时(2020年1月24日,农历大年三十):插件版本为5.0.8
插件作者是Kartik Visweswaran 官网地址 https://plugins.krajee.com/file-input
插件介绍和特性就烦请各位大佬自行去查阅了,这里就不再啰嗦。
本次项目中遇到的开发环境:
IDE:sublime和PHPstorm,并且我也不是职业前端,有错误的地方请大佬们指正。:)
后台语言:PHP、框架ThinkPHP5.1
JS库:jQuery 3.4
UI库:bootstrap3.3.X或者4.X 或者更新版本:注意:必须引入BS库。
首先可以NPM安装或者引用CDN。我这里下载源码并且引用的本地CSS和JS。
NPM安装:
$ npm install bootstrap-fileinput
Bower
bower install bootstrap-fileinput
Composer
php composer.phar require kartik-v/bootstrap-fileinput "dev-master"
Git或者直接下载ZIP
https://github.com/kartik-v/bootstrap-fileinput
fileinput插件适用于绝大部分的现代浏览器。浏览器支持情况:https://plugins.krajee.com/file-input#browser-support
--------------------------------我是分割线--------------------------------
引入项目
CSS引用顺序,bootstrap、fileinput、可选【自定义css(my.css等)】
JS引用顺序,jquery、bootstrap、fileinput、还有部分可选的,有需要用到再引入。
我的引入情况、(除了语言翻译插件外,其他插件要在fileinput.js之前引入)
<link rel="stylesheet" href="lib/bootstrap-3.3.7/dist/css/bootstrap.css">
<link rel="stylesheet" href="lib/fileinput/css/fileinput.css">
<link rel="stylesheet" href="css/my.css" media="all">
<script src="lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="UTF-8"></script>
<script src="lib/bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>
<script src="lib/fileinput/js/plugins/sortable.js"></script>>
<script src="lib/fileinput/js/fileinput.js"></script>
<script src="lib/fileinput/js/locales/zh.js"></script>
先上个小demo、目前实现了多文件选择、多文件异步上传、初始化预览图片(显示远程服务器上的图片)、上传后的回显等。
HTML
<input id="logo" name="file[]" multiple type="file" class="file" data-preview-file-type="text">
JS部分
$("#logo").fileinput({
language:"zh", //语言
name:'file[]',
// showUpload:false, //是否显示上传按钮
overwriteInitial:false, //是否选择新图之后替换原来的缩略图
multiple:true, //多图上传
// minFileCount: 1, // 最小上传数量
// maxFileCount: 90, //最大上传数量
uploadExtraData:{'token':''}, //上传时需要额外的参数、例如传token
browseOnZoneClick:true, //整个区域都可以点击选择文件
allowedFileTypes:['image'], //允许文件的类型
allowedPreviewTypes:['image'], //允许预留文件的类型
allowedPreviewMimeTypes:['image'], //允许Mime类型
// allowedFileExtensions:['jpg'], //允许的后缀
uploadUrl: "localhost/admin/index/upload", //后台上传接口
PreviewFileType:['image'],
initialPreviewAsData:true, //初始化预览
initialPreview :res['logo'], //初始化预览的图片文件
});
PHP部分
public function file()
{
$files = request()->file("file");
$files_array = [];
if ($files) {
foreach ($files as $file) {
$file_info = $file->move("./static/uploads");
//中间省去了文件校检、重命名、上传到OSS等操作的代码
if ($file_info) {
$file_name = $file_info->getSaveName();
}
array_push($files_array, $file_name );
}
//需要回显则需要按照以下格式返回
$files_array = [
'initialPreview' => [
//回显的图片URL
$files_array
],
'initialPreviewConfig' => [],
'initialPreviewThumbTags' => [],
'append' => true //追加显示
];
return $files_array;
}
return false;
}
待补充...