Bootstrap Fileinput 插件使用

升级老项目，需要用到文件上传，找到一个基于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;
    }

 

待补充...