实现无刷新上传文件,使用FormData进行Ajax请求

通过传统的form表单提交的方式上传文件
HTML代码 @L_502_0@
  1. <formid="uploadForm"action="http://localhost:8080/cfJAX_RS/rest/file/upload"method="post"enctype="multipart/form-data">
  2. <h1>测试通过Rest接口上传文件</h1>
  3. <p>指定文件名:<inputtype="text"name="filename"/></p>
  4. <p>上传文件<inputtype="file"name="file"/></p>
  5. <p>关键字1:<inputtype="text"name="keyword"/></p>
  6. <p>关键字2:<inputtype="text"name="keyword"/></p>
  7. <p>关键字3:<inputtype="text"name="keyword"/></p>
  8. <inputtype="submit"value="上传"/>
  9. </form>

不过传统的form表单提交会导致页面刷新,但是在有些情况下,我们不希望页面被刷新,这种时候我们都是使用Ajax的方式进行请求的:
Js代码
    $.ajax({
  1. url:"http://localhost:8080/STS/rest/user",
  2. type:"POST",250)"> data:$('#postForm').serialize(),250)"> success:function(data){
  3. $('#serverResponse').html(data);
  4. },250)"> error:function(data){
  5. $('#serverResponse').html(data.status+":"+data.statusText+":"+data.responseText);
  6. }
  7. });

如上,通过$('#postForm').serialize()可以对form表单进行序列化,从而将form表单中的所有参数传递到服务端。
但是上述方式,只能传递一般的参数,上传文件文件流是无法被序列化并传递的。
不过如今主流浏览器都开始支持一个叫做FormData的对象,有了这个FormData,我们就可以轻松地使用Ajax方式进行文件上传了。

FormData是什么呢?我们来看看Mozilla上的介绍。XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单".比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件所有主流浏览器的较新版本都已经支持这个对象了,比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。

这里只展示一个通过from表单来初始化FormData的方式:
<formenctype="multipart/form-data"method"post"name"fileinfo">

相关文章

JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表单提交的返回...
AJAX 每日更新前端基础,如果觉得不错,点个star吧 &#128515; https://github.com/WindrunnerMax/E...
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使用的SpringSe...
很早就听闻ajax的名声,但是却一直不知道怎么用,今天自己捣鼓了一下,竟然会用了,哈哈哈哈。 为了防止...
需要在服务器上进行哈 jquery的ajax方法: // jquery请求 $.ajax({ url: &quot;./server/slider.js...
Ajax函数封装ajax.js // Get / Post // 参数 get post // 是否异步 // 如何处理响应数据 // URL // var...