Kindeditor asp上传图片代码,Kindeditor asp图片浏览器源码,Kindeditor + layui 上传图片源码

今天写了一个 Kindeditor asp上传图片代码,Kindeditor asp图片浏览器源码,Kindeditor + layui 上传图片源码，效果如下：

以下是首页代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>蚂蚁学院 Layui + Kindeditor 图片上传+图片浏览+编辑器 php源码</title>
	<link rel="stylesheet" href="layui/css/layui.css">
	<link rel="stylesheet" href="css.css">
	<link rel="stylesheet" href="kindeditor/themes/default/default.css" />
	<script charset="utf-8" src="kindeditor/kindeditor-all.js"></script>
	<script charset="utf-8" src="kindeditor/lang/zh-CN.js"></script>
</head>
<body>

<div class="layui-container">
	<form class="layui-form layui-form-pane" action="">
		<div class="layui-form-item">
			<div class=" layui-col-md9">
				<label class="layui-form-label">图片地址</label>
				<div class="layui-input-block">
					<input type="text" name="picture" id="picture" autocomplete="off" placeholder="请上传图片" class="layui-input">
				</div>
			</div>
			<div class="layui-col-md3 simple-btn">
				<input type="button" class="layui-btn upload" id="uploadBtn" value="上传" >
				<input type="button" class="layui-btn" id="broswerBtn" value="浏览">
			</div>
		</div>
		<textarea name="content" style="width:800px;height:400px;visibility:hidden;">蚂蚁学院 http://www.mayixueyaun.com<br />Kindeditor 图片上传+图片浏览+编辑器 asp源码</textarea><br />
		<button type="submit" class="layui-btn" lay-submit="" lay-filter="submitForm">立即提交</button>
	</form>
</div>

<!-- body 末尾处引入 layui -->
<script src="layui/layui.js"></script>
<script>
layui.use(function(){
	var layer = layui.layer
	var form = layui.form

	form.on('submit(submitForm)', function(data){
		alert(JSON.stringify(data.field), {
			title: '最终的提交信息'
		})
		return false;
	});

});

KindEditor.ready(function(K) {
	
	var upload_url="inc/upload_json.asp";
	var file_url="inc/file_manager_json.asp";
	var editor = K.create('textarea[name="content"]', {
		fileManagerJson : file_url,
		uploadJson : upload_url,
		allowFileManager : true,
		afterBlur: function () { this.sync(); }		//加入这句关键的代码，即可解决问。
	});

	var logo_btn = K.uploadbutton({
		button : K('#uploadBtn')[0],
		fieldName : 'imgFile',
		url : upload_url,
		afterUpload : function(data) {
			if (data.error === 0) {
				var url = K.formatUrl(data.url, 'absolute');
				K('#picture').val(url);
			} else {
				alert(data.message);
			}
		},
		afterError : function(str) {
			alert('自定义错误信息: ' + str);
		}
	});
	logo_btn.fileBox.change(function(e) {
		logo_btn.submit();
	});

	K('#broswerBtn').click(function() {
		editor.loadPlugin('filemanager', function() {
			editor.plugin.filemanagerDialog({
				viewType : 'VIEW',
				dirName : 'image',
				clickFn : function(url, title) {
					K('#picture').val(url);
					editor.hideDialog();
				}
			});
		});
	});
});
</script>

</body>
</html>

30蚂蚁积分下载

或

3蚂蚁币下载

说明：本站所有作品均由蚂蚁学院工作人员原创开发制作，版权归蚂蚁学院所有，禁止非法转载或转售，谢谢各位朋友的配合，蚂蚁学院保留追究相应责任的权利。如何赚取蚂蚁积分？如何购买蚂蚁金币？

静坐常思己过，闲谈莫道人短。面对生活中的挫折，不必怨天尤人，更不必灰心丧气。多从自己身上找原因，从内心去接纳、去承担，然后用头脑去思考、去改变。

 0

本文标签：

<< 上一篇: 已经是最新一篇文章了

已经是最后一篇文章了
下一篇>>