本文主要是介绍Layui框架伴随图片上传需求的表单提交问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
表单提交难免会携带图片上传或附件上传等情况。
最近在使用Layui框架，Layui默认的form表单提交会自动监听其内的<button>标签，当点击button时自动触发表单提交事件。
同样，Layui的upload上传控件默认自动提交，也可以通过绑定另一个按钮，控制提交。
控件功能不再详述。
综上，最初的想法是，将upload通过绑定form的button，这样，点击form表单时，先触发upload提交，再执行表单提交。可惜的是，正好相反，先提交表单，这样就没法达到表单中记录上传附件路径的目的了。
为此，个人想到了两种方式：一种是自己控制附件上传和表单提交的时机，屏蔽form的提交监听（给button设置type=button）。一种是在原来基础上，控制先触发upload，再提交。
思路是：事先给upload设置隐藏按钮，用于触发上传事件，用户在录入表单、上传图片过程中展示预览，并非真正上传，触发表单事件后，记录表单内其他字段信息，手动触发隐藏按钮（同时屏蔽form跳转），在upload上传回调函数里执行表单提交。
具体的代码：
html:
<form class="layui-form form1" lay-filter="form1"><div class="layui-form-item"><label class="layui-form-label">1寸照片:</label><div class="layui-input-inline" style="position:relative;"><button id="upload1" type="button" style="position:absolute;opacity:0;height:140px;width:100px;"></button><button id="hideupload1" type="button" style="display:none;"></button>//上传绑定按钮<img id="imgPhoto" src="imgs/pic_bg.png" style="width:100px;height:140px;">//图片预览</div></div>
//...表单其他内容<div class="layui-form-item"><div class="layui-input-inline"><button class="layui-btn" lay-submit="" lay-filter="subForm3">保存并提交审核</button></div></div>
</form>js:
//表单提交监听
form.on('submit(subForm3)', function(data){layer.msg('提交中, 请稍后...', {icon: 16,shade: 0.01});subData.unitType = data.field.unittype;subData.industryProvince = data.field.industryProvince;//...//subData = {},先将表单其他内容存放在对象里if(isUpload){//判断是否上传图片，触发图片的上传功能$("#hideupload1").trigger('click');}else{//没上传图片则顺序执行表单提交$.ajax({type:"PUT",url:baseAjaxUrl+"/fmOperateDeclareRecords/front_login",//对应controller的URLasync:true,contentType:'application/json',data:JSON.stringify(subData),needToken: true,success:function(result){layer.closeAll();//关闭所有加载层if(result.code == 200){layer.msg("提交审核成功",{icon:1});goBackCertificate();}else if(result == '302'){//未登录或token过期window.location.href = loginUrl;}},error:function(result){layer.closeAll();//关闭所有加载层layer.msg("申请失败："+result.responseJSON.message,{icon:10});}});}return false;//阻止表单跳转，非常必要！！！。
}//图片上传控件
layui.use(['element','laydate','form','upload'], function(){form = layui.form;var upload = layui.upload;var uploadInst = upload.render({elem: '#upload1',url: uploadImgUrl+'/NJ_Upload/upload/uploadFileAll?FolderType=2&isupload=true',acceptMime: 'image/*',field: "Filedata",auto:false,//不自动提交bindAction: "#hideupload1",//绑定真正提交的按钮size: 3072,headers:{"Token": winStorage.token//验证用户token},choose:function(obj){//假上传，实际转为base64预览obj.preview(function(index, file, result){$('#imgPhoto').attr('src', result); //图片链接（base64）});isUpload = true;//判断是否已上传，用于表单提交中控制跳转},done: function(obj){if(obj.success){subData.photoPath = obj.url;$.ajax({type:"PUT",url:baseAjaxUrl+"/fmOperateDeclareRecords/front_login",//对应controller的URLasync:true,contentType:'application/json',data:JSON.stringify(subData),needToken: true,success:function(result){layer.closeAll();//关闭所有加载层if(result.code == 200){layer.msg("提交审核成功",{icon:1});goBackCertificate();}else if(result == '302'){//未登录或token过期window.location.href = loginUrl;}},error:function(result){layer.closeAll();//关闭所有加载层layer.msg("申请失败："+result.responseJSON.message,{icon:10});}});}else{layer.msg("上传失败",{icon:10});}},error: function(obj){layer.msg("上传失败",{icon:10});}});
});至此就可以了。代码执行顺序是，如果上传了图片，先执行upload的choose事件预览展示，当点击表单提交按钮时，手动触发upload监听的隐藏按钮点击事件，执行upload的done事件。
这篇关于Layui框架伴随图片上传需求的表单提交问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
