ajax 提交form表单,上传文件

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/poyouzhisan/article/details/90673292

参考 :https://blog.csdn.net/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.web.multipart.commons.CommonsMultipartResolver">
        <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); 
              }
           }
	    });

}); 
展开阅读全文

没有更多推荐了,返回首页