用 jQuery.ajax 基于 XMLHttpRequest,FormData 的表单上传

 XMLHttpRequest 已经推出很长时间了,W3C 对此引入了一些很好的特性,阮一峰有一篇很好的文章对此进行了汇总式的介绍 XMLHttpRequest Level 2 使用指南 。

在实际使用中排除那些落伍的浏览器,最简单的使用方法就是
  • 用标准的 HTML 语法生成 FORM 表单
  • hander 表单的 submit 事件,用 FormData 生成 XMLHttpRequest 提交数据,进行提交, 向submit 返回 false
  • 处理 XMLHttpRequest 结果

这样就完成了ajax方式的表单提交。当然这是支持文件上传 的。如果我们使用 jQuery.ajax 代码大概就是这个样子

Js代码:  
  1. $('yourform').submit(function(){  
  2.     var formdata=new FormData(this);  
  3.     $.ajax({  
  4.         type:'POST',  
  5.         url:'/yourpath',  
  6.         data:formdata,  
  7.         /** 
  8.          *必须false才会自动加上正确的Content-Type 
  9.          */  
  10.         contentType:false,  
  11.         /** 
  12.          * 必须false才会避开jQuery对 formdata 的默认处理 
  13.          * XMLHttpRequest会对 formdata 进行正确的处理 
  14.          */  
  15.         processData:false  
  16.     }).then(function(){  
  17.         //doneCal  
  18.     },function(){  
  19.         //failCal
  20.     });  
  21.     return false;  
  22. });  

标准之下就是这么简单。

有很多时候是可以要求用户使用现代浏览器的。比如对于编辑,对应定制的企业用户。

原文参考自站长网http://www.software8.co/wzjs/jquery/2519.html

原文地址:https://www.cnblogs.com/wwwroot/p/2856241.html