bootstrap多圖上傳外掛很多人在tp3.2都用過，但是tp5的用法又有些不同。

使用步驟：

1、 首先要把頁面調出來

按照官方demo給出那麼多樣式，我們根據需要選中其中一個就好

頁面怎麼調到自己的項中，這裡拿tp5來說，找到相應的檢視檔案，（需要點bootstrap的基礎），注意bootstrap的CSS和JS檔案的引入

<link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/static/css/default.css"
 
>
<link href="/static/css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
<script src="/static/js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="/static/js/fileinput.js" type="text/javascript"></script>
<script src="/static/js/locales/zh.js" type="text/javascript"
 
></script>
<script src="/static/js/bootstrap.min.js" type="text/javascript"></script>

新增

<form enctype="multipart/form-data">
    <div class="form-group">
        <input id="file-0" type="file" multiple class="file">
    </div>
</form>

id="file-0"就是用的id=
 
"file-0"的這個樣式，也就是下圖

寫入JS

<script>
    $(document).ready(function() {
        $("#test-upload").fileinput({
            'showPreview' : false,
            'allowedFileExtensions' : ['jpg', 'png','gif'],
            'elErrorContainer': '#errorBlock'
});
        /*
         $("#test-upload").on('fileloaded', function(event, file, previewId, index) {
         alert('i = ' + index + ', id = ' + previewId + ', file = ' + file.name);
         });
         */
});
    var id=2;
    //圖片上傳
initFileInput("file-0","{:URL('imgupload')}");
    //初始化fileinput控制元件（第一次初始化）
function initFileInput(ctrlName,uploadUrl){
        var control=$('#'+ctrlName);
        control.fileinput({
            language:'zh',//設定語言
uploadUrl:uploadUrl,//上傳地址
allowedFileExtendsions:['jpg','png','gif','jpeg'],//接收的檔案字尾
showUpload:true,//是否顯示上傳按鈕
showCaption:true,//是否顯示標題
showPreview:true,//是否顯示預覽圖，預設true
showRemove:true,//是否顯示刪除/清空按鈕，預設true。
browseClass:"btn btn-primary",//按鈕樣式
previewFileIcon:"<i class='glyphicon glyphicon-king'></i>",
            maxFileCount:10,//允許同時上傳的最大檔案數
dropZoneEnabled:true,//是否顯示拖拽區域
initialPreviewConfig:{
                caption:ctrlName,
                width:'120px',
                url:uploadUrl,
                key:101,
                success:function(){



                }
            }



        });

    }
    //監聽事件
$("#file-0").on("fileuploaded",function(event,data,previewId,index){
        console.log(data.response['id']);

    });

</script>

頁面就變成中文啦

2、控制器

//多圖上傳
public function imgupload()
    {
// 獲取表單上傳檔案
$files = request()->file();
        foreach($files as $file){
// 移動到框架應用根目錄/public/uploads/ 目錄下
$info = $file->rule('date')->move(ROOT_PATH . 'public' . DS . 'upImg');
$keyName = $file -> getInfo()['name'];
            if($info){
$db=Db::name('excel_img');
$filename = '/'.'upImg/'.$info->getSaveName();
$data['keyno']=$keyName;
$data['path']=$filename;
$res=$db->insert($data);
$filedata=['id'=>$res,'keyn'=>$data['keyno'],'paths'=>$data['path']];
                echo json_encode($filedata);
            }else{
// 上傳失敗獲取錯誤資訊
echo $file->getError();
            }
        }
    }