用layui实现表单提交（包含图片）

近段时间接触了layui,发现挺好用的，妈妈再也不用担心我的样式丑了~

说回正题，做个学习帖，记录一下layui实现表单提交中包含头像上传的问题：

首先导入jquery(也可以用layui自带的)，再导入layui的css和js,注意你的逻辑js文件要在layui js的下面

html代码：

<form id="myadd" class="layui-form layui-form-pane" lay-submit
		lay-filter="userForm" enctype="multipart/form-data">
		<input type="hidden" name="type" id="type" value="add">
		<input type="hidden" name="userno" id="userno">
		<div class="layui-form-item">
			<label class="layui-form-label">账号</label>
			<div class="layui-input-block">
				<input type="text" lay-verify="title" class="layui-input" name="userid" id="userid"
					required placeholder="请输入账号">
			</div>
		</div>
		
		<div class="layui-form-item">
			<label class="layui-form-label">密码</label>
			<div class="layui-input-block">
				<input type="password" lay-verify="pass" class="layui-input" name="password"
					id="password" required placeholder="">
			</div>
		</div>
		
		<div class="layui-form-item">
			<div class="layui-upload">
				<button type="button" class="layui-btn" id="photo" 		 name="photo">
					<i class="layui-icon">&#xe67c;</i>上传头像
				</button>
				<div class="layui-upload-list">
					<img class="layui-upload-img" id="demo1">
					<p id="demoText"></p>
				</div>
			</div>
		</div>

		<div class="layui-form-item">
			<div class="layui-input-block">
				<button id="save" type="button" class="layui-btn" lay-submit lay-filter="formUser">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>

效果图：

注意layui上传文件不是<input type=“file” /这种格式，官方文档说法是：它不能很好地与其它表单元素并存，所以我们常常要单独为它做一个业务层面的“异步上传”，即先让图片上传，再和其它表单一起提交保存。

js代码

1. 首先导入所需模块

layui.use(['layer', 'form', 'upload', 'laydate'], function() {
	let layer = layui.layer;
	let form = layui.form;
	let upload = layui.upload;
	let laydate = layui.laydate;
})

2. 定义一个全局变量myFile,layui中有个·文件上传的模块 upload,里面有个选择文件后的回调函数choose: function(obj)，返回一个object参数，可以将文件赋给myFile

let myFile;
		upload.render({
			elem: '#photo',
			url: '../../person',
			// auto: false, // 选择文件后不自动上传
			// bindAction: '#save', // 指向一个按钮触发上传
			accept: 'images',
			choose: function(obj) {
				obj.preview(function(index, file, result) {
					$('#demo1').attr('src', result); // 图片链接（base64）
					myFile = file;

				});
			},
			before: function(obj) {
				// 预读本地文件示例，不支持ie8
				obj.preview(function(index, file, result) {
					$('#demo1').attr('src', result); // 图片链接（base64）
				});
			},
			done: function(res) {
				// 如果上传失败
				if(res.code > 0) {
					return layer.msg('上传失败');
				}
				// 上传成功
			},
			error: function() {
				// 演示失败状态，并实现重传
				var demoText = $('#demoText');
				demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
				demoText.find('.demo-reload').on('click', function() {
					uploadInst.upload();
				});
			}
		});

重点代码：
choose: function(obj) {
obj.preview(function(index, file, result) {
$(’#demo1’).attr(‘src’, result); // 图片链接（base64）
myFile = file;
});
},

3. 然后将其添加到FormData通过ajax一起提交给后台:

function updatePerson(myFile) {
	let myForms = $('#myadd')[0];
	let formdatas = new FormData(myForms);
	formdatas.append("photo", myFile);
	console.log("updateFile", myFile)
	// 提示
	layer.confirm('确定要更新人员信息吗?', {
			icon: 3,
			title: '提示'
		},

		function(index) {
			$.ajax({
				method: 'post',
				url: '../../person',
				data: formdatas,
				contentType: false,
				processData: false,
				success: (data) => {
					if(data == '1') {
						// 提交成功
						layer.msg('更新成功', {
							icon: 1
						}, function() {
							// 当你在iframe页面关闭自身时
							var indexx = parent.layer.getFrameIndex(window.name); // 先得到当前iframe层的索引
							parent.layer.close(indexx); // 再执行关闭
							// 父页面刷新
							parent.location.reload();
						});
					} else {
						// 提交失败
						layer.msg('更新失败', {
							icon: 2
						}, function() {
							var indexx = parent.layer.getFrameIndex(window.name); // 先得到当前iframe层的索引
							parent.layer.close(indexx); // 再执行关闭

						})
					}

				},
				dataType: 'text'
			})

		});

	return false; // 阻止表单跳转。如果需要表单跳转，去掉这段即可。
}

注意form设置enctype=“multipart/form-data”，还有就是第二步代码要放在第一步的function中哦

后台通过Part获取图片，其他正常表单用request.getParameter获取即可

至此一个包含图片上传的表单就此完成~