文档章节

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

文文1
 文文1
发布于 2016/06/22 01:23
字数 710
阅读 471
收藏 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
粉丝 26
博文 512
码字总数 158580
作品 0
长沙
程序员
私信 提问
加载中

评论(0)

FormData序列化及file文件上传

表单数据上传 情况一:   一、当表单文件处于无任何处理状态时,用submit提交直接上传; 但这种方式上传,数据无任何处理;(极少使用);   但是传统的表单提交会导致页面刷新,但是有些情...

osc_as44gib4
2018/06/30
2
0
利用FormData进行ajax上传文件

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

单蛙
2016/06/17
3.8K
0
HTML5 FormData+Ajax上传文件表单

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

IamOkay
2017/10/31
463
0
01- ajax, 登录验证,json数据,文件上传

1、ajax简介   1.向服务器发送请求的途径 # 向服务器发送请求的途径 浏览器地址栏,默认get请求 form表单: a标签,默认get请求 Ajax 2、简介 AJAX(Asynchronous Javascript And XML)翻译...

osc_adpilc97
2018/07/10
4
0
koa2:通过Ajax方式上传文件,使用FormData进行Ajax请求

koa2通过表单上传的网上很多,但通过Ajax方式上传文件,使用FormData进行Ajax请求,不好找。 参考了这个用base64上传图片的例子。https://github.com/Yuki-Minakami/Koa2-FormData 我的项目列...

osc_xgtks7bb
2018/04/19
4
0

没有更多内容

加载失败,请刷新页面

加载更多

Linux中实用但很小众的11个炫酷终端命令

今天给大家分享Linux总结出来的11个炫酷的Linux终端命令大全,通过今天这篇文章将向大家展示一系列的Linux命令、工具和技巧,我希望一开始就有人告诉我这些,而不是曾在我成长道路上绊住我。...

osc_50znnx42
22分钟前
5
0
GPRS(Air202) Lua开发: GPIO中断

1.原理图 2.配置GPIO5中断,上拉输入 1.点击按钮进入下降沿中断 2.松开按钮进入上升沿中断 module(...,package.seeall) --固定写法,具体百度lua文件加载(初学者不需要考虑,直接写上这句话即可...

osc_mf7xwvy6
24分钟前
18
0
相机激光标定算法:从理论到实践

点击上方“3D视觉工坊”,选择“星标” 干货第一时间送达 本文是标定系列解读第三篇,介绍了Camera-Lidar标定,通过对一些基础知识和小细节进行讨论和理论推导,给出了一些可以提升标定精度的...

osc_s2b5kacl
25分钟前
10
0
webpack4.0 把自己总结'吐'的一篇文章

上大学的时候老师讲一门语言,上来的第一节课就是配置各种环境,而通常看到那些脑袋都是一种快要炸的状态🤯。随着后来对Linux的学习之后发现,并没有那么头疼配置的东西(对于命令这么复杂...

osc_mor4smaq
27分钟前
15
0
实现一个“真”的网页

@一个“真”的网页 实现一个真的网页~ 经过了前几次的实验,相信大家已经对网页布局有了初步的了解,那么这一次就让我们来做个“真网页”吧!复制代码 文章展示页是非常非常常见的东西,几...

osc_7ekszy4a
28分钟前
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部