layui使用总结，图片上传，模板替换，表单提交等

单图上传封装

每次上传图片js都要重新写一遍upload.reader方法，通过固定模板每次调用一个方法即可。

//图片上传渲染方法    general.js

function simpleUpload(name){
	var upload = layui.upload
	var uploadBtn = name + '_btn';
	var inputId = name + "_input";
	var  imageId = name + "_image"
	var textId = name + "_text";
	upload.render({
		elem : ('#' + uploadBtn),
		url : '../upload',
		accept : 'file',
		exts : "jpg|png|gif|bmp|jpeg|pdf",
		before : function(obj) {
			obj.preview(function(index, file, result) {
				load_index = layer.load(2, {
					time : 20 * 1000
				});
			});
		},
		done : function(res) {
			layer.close(load_index);
			if (res.result = 'success') { //上传成功回显以及赋值
				$('#' + imageId).attr('src', res.data[0]);
				$('#' + inputId).val(res.data[0]);
			} else { //如果上传失败
				return layer.msg('上传失败');
			}
		},
		error : function() {
			//演示失败状态，并实现重传
			layer.close(load_index);
			var demoText = $('#' + textId);
			demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
			demoText.find('.demo-reload').on('click', function() {
				uploadInst.upload();
			});
		}
	});
}

 

 

//html页面 test.html

<div class="layui-inline-block">
	<label class="layui-form-label">预览图：</label>
	<div class="layui-input-block">
		<button type="button" class="layui-btn" id="preview_btn">上传图片</button>
		<div class="layui-upload-list">
			<input type="hidden" name="preview" id="preview_input" lay-verify="required"
				value=""> <img class="layui-upload-img"
				src="" id="preview_image">
			<p id="preview_text"></p>
		</div>
	</div>
</div>	<label class="layui-form-label">预览图：</label>
	<div class="layui-input-block">
		<button type="button" class="layui-btn" id="preview_btn">上传图片</button>
		<div class="layui-upload-list">
			<input type="hidden" name="preview" id="preview_input" lay-verify="required"
				value=""> <img class="layui-upload-img"
				src="" id="preview_image">
			<p id="preview_text"></p>
		</div>
	</div>
</div>

simpleUpload("preview");//渲染图片上传

 

 

//simpleUpload("preview");只需调用方法即可完成图片上传

 

 

//正则替换模板引擎初始值为空

<script id="info_tmpl" type="text/html">
		<form class="layui-form layui-form-pane1" method="post">

			<div class="layui-form-item layui-row ">
				<div class="layui-col-md3">
					<label class="layui-form-label layui-col-md3">商品ID: </label>
					<div class="layui-input-inline ">
						<input type="text" name="productId" id="productId"
							value="{{ d.productId }}" readonly="" autocomplete="off"
							class="layui-input">
					</div>
				</div>

			</div>

			<button class="layui-btn layui-btn-normal" lay-submit id="edit_btn"
				lay-filter="info_form"></button>

		</form>
	<script>

 

//新增模板和编辑模板通用，编辑模板输入框含有{{d.value}}等表达式在新增模板中需要替换

 

function replacePrimaryValue(tempId){

var html = tempId.innerHTML;
var patt = new RegExp('\{\{.*\}\}', 'g');//{{}}
html = html.replace(patt, "");
return html;

}

弹出层按钮btn2点击保存后，先渲染表单提交方法，再点击隐藏按钮完成操作。

table.on('tool(demo)', function(obj) {
				var data = obj.data;
				var id = data.id
				if (obj.event === 'del') {
					layer.confirm('真的删除吗？', function(index) {
						obj.del();
						$.ajax({
							type : 'POST',
							url : "../delete",
							data : {
								'id' : id
							},
							success : function(data) {
								if (data.code == '0') {
									layer.msg('删除成功');
								} else {
									layer.msg('删除失败');
								}
							}
						});
						layer.close(index);
					});
				} else if (obj.event === 'edit') {
					var getTpl = demo.innerHTML
					var laytpl = layui.laytpl;
					laytpl(getTpl).render(data, function(html) {
						var reg = new RegExp('readonly=""', "g"); //g,表示全部替换。
						html = html.replace(reg, "");
						layer.open({
							type : 1,
							title : [ '公司详情', 'font-size:18px;text-align:center' ],
							area : [ '400px', '400px' ],
							btn : [ '关闭', '保存' ], //可以无限个按钮
							btn2 : function(index, layero) {
								form.on('submit(edit_form)', function(formData) {
									var json = formData.field;
									console.log(json);
									$.ajax({
										type : 'post',
										url : "../update",
										dataType : "json",
										contentType : "application/json; charset=utf-8",
										data : JSON.stringify(json),
										success : function(res) {
											if (res.code == '0') {
												layer.msg(res.message);
												table.reload('idTest', {
													where : data.field,
												});
											} else {
												layer.msg(res.message);
											}
										}
									});
									return false;
								});
								$("#editBtn").click();
							},
							content : '<div style="overflow:hidden">' + html + '</div>' //这里content是一个普通的String
						});
					});
				}
			});