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的URL
            async: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的URL
                    async: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事件。