参考 ：/gu_wen_jie/article/details/72177714
注意：使用layui 按钮提交表单时，按钮会默认提交表单。解决如下：
$('.my-btn-cancel').on('click', function (e) {e.preventDefault();//阻止按钮默认提交});
form 表单
<form class="my-form" enctype="multipart/form-data" id="Form" name="Form" method="post" ><input type="text" id="editid" name="editid" value="${pd.editid}" style="display:none"><input type="text" id="ispid" name="ispid" value="${pd.ispid}" style="display:none"><input type="text" id="devrealpic" name="devrealpic" value="${pd.devrealpic}" style="display:none"><input type="text" id="devpicid" name="devpicid" value="0"style="display:none"><div class="my-form-items"><div class="my-form-input-block"><p><a href="#" title="1:只能上传图片格式 2:图片最大1MB 3:图片尺寸为176px*176px">说明</a> </p></div></div><div class="my-form-items"><label>设备类型:</label><div class="my-form-input-block"><input type="text" id="devpicname" name="devpicname" ></div></div><div class="my-form-items "><label>选择图片:</label><div class="my-form-input-block file-box"><input id="filename" name="filename"class="file-btn" onchange="changepic(this)" type="file" accept="image/*">上传</div></div><div class="my-form-items"><label>预览图:</label><div class="my-form-input-block"><img id="show" width="57" height="35"></div></div><div class="my-form-items"><div class="my-form-btn"><button class="my-btn-save" >保存</button><button class="my-btn-cancel" style="margin-left: 24px" onclick="cancel()">取消</button></div></div></form>
使用FormData
使用FormData，在构造这个对象的时候，把表单的对象，作为一个参数放进去，就可以了，然后FormData，就会得到这个表单对象里面的所有的参数，甚至我们在表单中，都不需要声明enctype ="multipart/form-data" ，就可以直接提交。使用FormData，第一是在提交表单的时候，不需要写大量的js来获得表单数据，直接把表单对象构造就行了。第二就是可以直接异步上传文件注意：使用FormData提交的时候，大家会注意到表单提交的是request payload，具体有兴趣的同学可以自己百度，它不是之前的Form data提交的，所以后台也是要经过处理的，比如springMVC就需要配置new FormData($('#Form')[0]),//序列化表单，可序列化文件
springmvc配置
<!-- 配置nultipartresolver,注意：id名必须这样写，不然会报错 --><bean id="multipartResolver" class="org.springframework.monsMultipartResolver"><property name="defaultEncoding" value="UTF-8"></property><property name="maxInMemorySize" value="10240000"></property></bean>
ajax 提交
$('.my-btn-save').on('click', function (e) {e.preventDefault();//阻止按钮默认提交var devpicname = $("#devpicname").val();var filename = $("#filename").val();if(devpicname==""){parent.layer.alert('设备类型名称不能为空！', {title: "提示"});return false;}if(filename==""){parent.layer.alert('图片不能为空！', {title: "提示"});return false;}$.ajax({url:"devpic/uploadFile",type: 'POST',cache: false,data: new FormData($('#Form')[0]),//序列化表单，$("form").serialize()只能序列化数据，不能序列化文件processData: false,contentType: false,dataType:"json",success: function (result) {e.preventDefault();//阻止按钮默认提交//console.log(result);//打印服务端返回的数据(调试用)if(result.code==0){parent.layer.closeAll();//关闭添加修改框}else{parent.layer.msg(result.msg); }}});});
