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;
    }

 

待補充...