文档章节

通过Ajax方式上传文件,使用FormData进行Ajax请求

文文1
 文文1
发布于 2016/06/22 01:23
字数 710
阅读 65
收藏 15

通过传统的form表单提交的方式上传文件:

Html代码 

<form id= "uploadForm" action= "http://localhost:8080/cfJAX_RS/rest/file/upload" method= "post" enctype ="multipart/form-data">
     <h1 >测试通过Rest接口上传文件 </h1>
     <p >指定文件名: <input type ="text" name="filename" /></p>
     <p >上传文件: <input type ="file" name="file" /></p>
     <p >关键字1: <input type ="text" name="keyword" /></p>
     <p >关键字2: <input type ="text" name="keyword" /></p>
     <p >关键字3: <input type ="text" name="keyword" /></p>
     <input type ="submit" value="上传"/>
</form>

不过传统的form表单提交会导致页面刷新,但是在有些情况下,我们不希望页面被刷新,这种时候我们都是使用Ajax的方式进行请求的:

Js代码 

$.ajax({  

     url : "http://localhost:8080/STS/rest/user",  
     type : "POST",  
     data : $( '#postForm').serialize(),  
     success : function(data) {  
          $( '#serverResponse').html(data);  
     },  
     error : function(data) {  
          $( '#serverResponse').html(data.status + " : " + data.statusText + " : " + data.responseText);  
     }  
});  

如上,通过$('#postForm').serialize()可以对form表单进行序列化,从而将form表单中的所有参数传递到服务端。

但是上述方式,只能传递一般的参数,上传文件的文件流是无法被序列化并传递的。

不过如今主流浏览器都开始支持一个叫做FormData的对象,有了这个FormData,我们就可以轻松地使用Ajax方式进行文件上传了。

 

关于FormData及其用法


FormData是什么呢?我们来看看Mozilla上的介绍。

XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单".比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件. 

所有主流浏览器的较新版本都已经支持这个对象了,比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。

参见:https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/FormData

 

这里只展示一个通过from表单来初始化FormData的方式

<form enctype="multipart/form-data" method="post" name="fileinfo">

Js代码 

var oData = new FormData(document.forms.namedItem("fileinfo" ));  

oData.append( "CustomField", "This is some extra data" );  
var oReq = new XMLHttpRequest();  
oReq.open( "POST", "stash.php" , true );  
oReq.onload = function(oEvent) {  
      if (oReq.status == 200) {  
          oOutput.innerHTML = "Uploaded!" ;  
     } else {  
          oOutput.innerHTML = "Error " + oReq.status + " occurred uploading your file.<br \/>";  
     }  
};  
oReq.send(oData);  

 

参见:https://developer.mozilla.org/zh-CN/docs/Web/Guide/Using_FormData_Objects

 

使用FormData,进行Ajax请求并上传文件


这里使用JQuery,但是老版本的JQuery比如1.2是不支持的,最好使用2.0或更新版本:

Html代码 

<form id= "uploadForm">  

      <p >指定文件名: <input type="text" name="filename" value= ""/></p >  
      <p >上传文件: <input type="file" name="file"/></ p>  
      <input type="button" value="上传" onclick="doUpload()" />  
</form>  

Js代码 

function doUpload() {  

     var formData = new FormData($( "#uploadForm" )[0]);  
     $.ajax({  
          url: 'http://localhost:8080/cfJAX_RS/rest/file/upload' ,  
          type: 'POST',  
          data: formData,  
          async: false,  
          cache: false,  
          contentType: false,  
          processData: false,  
          success: function (returndata) {  
              alert(returndata);  
          },  
          error: function (returndata) {  
              alert(returndata);  
          }  
     });  
}  

本文转载自:

共有 人打赏支持
文文1
粉丝 21
博文 373
码字总数 119521
作品 0
长沙
程序员
私信 提问
HTML5 FormData+Ajax上传文件表单

文件表单的数据类事multipart/form-data,因此,formData需要特殊处理. 文件上传 参考文章: HTML5 + AJAX ( 原生JavaScript ) 异步多文件上传 [HTML5] Blob对象 通过Ajax方式上传文件,使用...

IamOkay
2017/10/31
0
0
利用FormData进行ajax上传文件

个人实现方式: html代码 js代码: 后台python代码 很简洁的代码,便可以达到Ajax方式上传文件,上面的代码中使用<input type="file" />这种传统的选择文件的方法产生文件对象,HTML5还支持使...

单蛙
2016/06/17
3.1K
0
通过Ajax方式上传文件

通过传统的form表单提交的方式上传文件: 不过传统的form表单提交会导致页面刷新,但是在有些情况下,我们不希望页面被刷新(即异步刷新),这种时候我们都是使用Ajax技术实现。 在js中添加$...

初雪之音
2016/08/03
61
0
通过jQuery Ajax使用FormData对象上传文件

FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单"。在 Mozilla Developer 网站 使用FormData对象 有详尽的FormData对象使用说明。但上传...

郏高阳
2016/09/07
272
0
JS中使用FormData上传文件、图片的方法

转自http://www.jb51.net/article/89998.htm 参考:https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/UsingFormDataObjects FormData 废话不多说,先上最后我用的完成版: 完整实......

lllo3o
2017/05/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

分布式Session共享解决方案

分布式Session一致性? 说白了就是服务器集群Session共享的问题 Session的作用? Session 是客户端与服务器通讯会话跟踪技术,服务器与客户端保持整个通讯的会话基本信息。 客户端在第一次访...

Java干货分享
11分钟前
1
0
开源软件和开源模式面临的生存危机

导读 开源模式可能正面临一场危机。越来越多的开源软件和平台被大型云计算服务商融入自家的云服务体系,并以此获利颇丰,但并不支付费用,也没有对开源社区做出相应的回馈。而实际上,大部分...

问题终结者
13分钟前
0
0
让看不见的AI算法,助你拿下看得见的广阔市场

人工智能技术的飞速发展给各行各业都带来了深远的影响,AI已被视为企业提升运营效能、应对市场竞争的必经之路。然而对于一些企业而言,让AI真正实现落地和应用,并且创造价值,仍是一件需要努...

个推
18分钟前
0
0
用SAN还是NAS?我来告诉你

存储区域网络(SAN)是以一种结构连接的存储,通常通过交换机连接,使许多不同的服务器能够轻松访问存储设备。从服务器应用程序和操作系统的角度来看,访问SAN中的数据存储或直接连接的存储之间...

linux-tao
21分钟前
0
0
centos7 部署Apache服务器

centos7 部署Apache服务器 置顶 2017年09月05日 09:12:49 师太,老衲把持不住了 阅读数:19700 飞翔科技 2017-09-04 16:24 Apache程序是目前拥有很高市场占有率的Web服务程序之一,其跨平台和...

linjin200
53分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部