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