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