{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