ajax 提交form表单，上传文件

参考 ：https://blog.csdn.net/gu_wen_jie/article/details/72177714

注意：使用layui 按钮提交表单时，按钮会默认提交表单。解决如下：

  $('.my-btn-cancel').on('click', function (e) {
            e.preventDefault();//阻止按钮默认提交
        }); 

form 表单

				
					
					
					
		

            	

                 
说明 
 				
        
	
       

                   设备类型:
            

                
            
        

        

             选择图片:
            

                上传
            
        
                

                  预览图:
            

                 
            
        
           

     

            保存
            取消
        
          

使用FormData

使用FormData，在构造这个对象的时候，把表单的对象，作为一个参数放进去，就可以了，然后FormData，就会得到这个表单对象里面的所有的参数，甚至我们在表单中，都不需要声明enctype ="multipart/form-data" ，就可以直接提交。

使用FormData，第一是在提交表单的时候，不需要写大量的js来获得表单数据，直接把表单对象构造就行了。第二就是可以直接异步上传文件

注意：使用FormData提交的时候，大家会注意到表单提交的是request payload，具体有兴趣的同学可以自己百度，它不是之前的Form data提交的，所以后台也是要经过处理的，比如springMVC就需要配置


new FormData($('#Form')[0]),//序列化表单，可序列化文件

springmvc配置

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); 
              }
           }
	    });

});