bootstrap file input 多圖片上傳編輯THINKPHP5

{layout name="layout" title="文章添加" /}
 <form  id="defaultForm" role="form" method="POST"  action="{:url('/admin/article/add/')}">
   <div class="form-group">
    <label for="exampleInputUsername">文章標題：</label>
    <input type="text" class="form-control" value="{present name="data.title"}{$data.title}{/present} " name="title" id="title" placeholder="請輸入連接名稱">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail">文章分類：</label>
     <select name="type_id" id="type_id" class="form-control">
     {foreach $listType as $vo}
     <OPTION value="{$vo.id}" {present name="data.type_id "}{if condition="$data.type_id eq $vo.id"} selected="selected" {/if}{/present} >{$vo.type_name}</OPTION>
     {/foreach}
     </select>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword">文章封面</label>
    <!-- 
    <input type="hidden" readonly  name="cover_pic" id="cover_pic" value="{present name="data.cover_pic"}{$data.cover_pic}{/present}">
    <img id="link_add_img" src="{present name="data.cover_pic"}{$data.cover_pic}{/present}"  width="100px" heigth="100px">
    <input type="button" id="selectImg" value="選擇圖片" /> -->
     <label class="control-label">Select File</label>
    <input id="input-702" name="kartik-input-702[]" type="file" multiple=true class="file-loading">
  </div>
  
  <div class="form-group">
    <label for="exampleInputEmail">文章內容：</label>
     <TEXTAREA name="content" id="content"  class="form-control">{present name="data.content"}{$data.content}{/present}</TEXTAREA>
  </div>

  <input type="hidden" name="__token__" value="{$Request.token}" />
  <input type="hidden" name="id" id="id" value="{present name="data.id"}{$data.id}{/present}" />
  <button type="submit" class="btn btn-default">提交</button>
  <button type="reset" class="btn btn-default">重置</button>
</form>    

 <!-- 配置文件 -->
<script src="__ROOT__kindeditor/kindeditor-all.js"  type="text/javascript"></script>
<script src="__ROOT__kindeditor/lang/zh-CN.js"  type="text/javascript"></script>
<link rel="stylesheet" href="__ROOT__kindeditor/themes/default/default.css" />

<!-- bootstrap上傳 -->
<script src="__ROOT__bootstrap/js/components/fileinput.js"  type="text/javascript"></script>
<script src="__ROOT__bootstrap/js/components/zh.js"  type="text/javascript"></script>
<link rel="stylesheet" href="__ROOT__bootstrap/css/components/fileinput.css" />

<script>
KindEditor.ready(function(K) {
    editor = K.create('textarea[name="content"]', {
        allowFileManager : true
    });
});
</script>
 <script type="text/javascript">
$(document).ready(function() {
    $('#defaultForm').bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            title: {
                message: 'The title is not valid',
                validators: {
                    notEmpty: {
                        message: '名稱必須填寫'
                    },
                    stringLength: {
                        min: 2,
                        max: 30,
                        message: '名稱最短2個字最長30個字'
                    },
                }
            },
 
            content: {
                message: 'The content is not valid',
                validators: {
                    notEmpty: {
                        message: '內容必須填寫'
                    },
                }
            },
        }
    });
});
</script>
<script>
$(function(){  
    $.ajax({  
       type : "post",  
       url : "/admin/article/listPic",  
       dataType : "json",  
       success : function(data) {  
        showPhotos(data);  
       },  
       error: function(XMLHttpRequest, textStatus, errorThrown) {  
              layer.msg('操做失敗！');  
                   }  
   });  
     
  });  


function showPhotos(djson){  
    //後臺返回json字符串轉換爲json對象      
    var reData = eval(djson);  
    // 預覽圖片json數據組  
    var preList = new Array();  
    for ( var i = 0; i < reData.length; i++) {  
       var array_element = reData[i];  
       // 圖片類型  
       preList[i]= "<img width=120px src=\""+array_element.img+"\" class=\"file-preview-image\">";  
        
    }  
    var previewJson = preList;  
    // 與上面 預覽圖片json數據組 對應的config數據  
    var preConfigList = new Array();  
    for ( var i = 0; i < reData.length; i++) {  
       var array_element = reData[i];  
       var tjson = {
                      caption: array_element.name, // 展現的文件名  
                   width: '120px',   
                   url: '/admin/article/delPic', // 刪除url  
                   key: array_element.id, // 刪除是Ajax向後臺傳遞的參數  
                   size: array_element.size,
                   extra: {id: 100}  
                   };  
       preConfigList[i] = tjson;  
    }  
    // 具體參數自行查詢  
    $('#input-702').fileinput({  
        uploadUrl: '/eim/upload/uploadFile.do',  
        uploadAsync:true,  
        showCaption: true,  
        showUpload: true,//是否顯示上傳按鈕  
        showRemove: false,//是否顯示刪除按鈕  
        showCaption: true,//是否顯示輸入框  
        showPreview:true,   
        showCancel:true,  
        dropZoneEnabled: false,  
        overwriteInitial: false,
        maxFileCount: 10,  
        initialPreviewShowDelete:true,  
        msgFilesTooMany: "選擇上傳的文件數量 超過容許的最大數值！",  
        initialPreview: previewJson,  
        previewFileIcon: '<i class="fa fa-file"></i>',  
        allowedPreviewTypes: ['image'],   
        previewFileIconSettings: {  
            'docx': '<i class="fa fa-file-word-o text-primary"></i>',  
            'xlsx': '<i class="fa fa-file-excel-o text-success"></i>',  
            'pptx': '<i class="fa fa-file-powerpoint-o text-danger"></i>',  
            'pdf': '<i class="fa fa-file-pdf-o text-danger"></i>',  
            'zip': '<i class="fa fa-file-archive-o text-muted"></i>',  
            'sql': '<i class="fa fa-file-word-o text-primary"></i>',  
        },  
        initialPreviewConfig: preConfigList  
    }).off('filepreupload').on('filepreupload', function() {  
//                                 alert(data.url);  
    }).on("fileuploaded", function(event, outData) {  
           //文件上傳成功後返回的數據， 此處我只保存返回文件的id  
           var result = outData.response.id;  
           // 對應的input 賦值  
           $('#htestlogo').val(result).change();  
    });  
}  
</script>
</script>

php部分代碼

    public function listPic()
    {
        $array=array(
                0=>array('img'=>'http://www.thinkphp5.cn/uploads/image/20170609/20170609111909_15177.jpg','id'=>1,'name'=>'aa','size'=>'576237'),
                1=>array('img'=>'http://www.thinkphp5.cn/uploads/image/20170609/20170609111909_15177.jpg','id'=>2,'name'=>'bb','size'=>'932882'));
        echo json_encode($array);
    }

 

其餘：ajax上傳 編輯的官方演示地址

http://plugins.krajee.com/file-input-ajax-demo/3

代碼中引入3個文件就能夠

fileinput.css

fileinput.js

zh.js