Bootstrap多圖上傳版本1.0

（1）非同步上傳檔案並儲存到資料庫

（2）限制檔案上傳個數

（3）監聽檔案是否上傳成功

一、控制器

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

二、檢視

1、引入js、css檔案

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
 
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="__STATIC__/file/css/default.css">
<link href="__STATIC__/file/css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="__STATIC__/file/js/fileinput.js" type="text/javascript"></script>
<script src="__STATIC__/file/js/fileinput_locale_zh.js" type="text/javascript"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

2、加入到body程式碼

<div class="form-group">
    <label class="col-sm-2 control-label">上傳圖片</label>
    <div id="formimageshow" class="formControls col-xs-10 col-sm-10">
        <button id="buttonShow" type="button" class="btn btn-success" onclick="upliadfileshow();return false;">上傳圖片</button><br/><br/>
        <label for="checkbox-1">最多支援20張輪播圖</label>
        <div class="formControls col-xs-8 col-sm-8">
            <input id="file-0" type="file" multiple class="file">
        </div>
    </div>
</div>

3、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']);
        console.log(data.response['paths']);
    });

</script>