通过传统的form表单提交的方式上传文件:
  1. <form id= "uploadForm" action= "http://localhost:8080/cfJAX_RS/rest/file/upload" method= "post" enctype ="multipart/form-data">
  2. <h1 >测试通过Rest接口上传文件 </h1>
  3. <p >指定文件名: <input type ="text" name="filename" /></p>
  4. <p >上传文件: <input type ="file" name="file" /></p>
  5. <p >关键字1: <input type ="text" name="keyword" /></p>
  6. <p >关键字2: <input type ="text" name="keyword" /></p>
  7. <p >关键字3: <input type ="text" name="keyword" /></p>
  8. <input type ="submit" value="上传"/>
  9. </form>
不过传统的form表单提交会导致页面刷新,但是在有些情况下,我们不希望页面被刷新,这种时候我们都是使用Ajax的方式进行请求的:
  1. $.ajax({
  2. url : "http://localhost:8080/STS/rest/user",
  3. type : "POST",
  4. data : $( '#postForm').serialize(),
  5. success : function(data) {
  6. $( '#serverResponse').html(data);
  7. },
  8. error : function(data) {
  9. $( '#serverResponse').html(data.status + " : " + data.statusText + " : " + data.responseText);
  10. }
  11. });
如上,通过$('#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">
  1. var oData = new FormData(document.forms.namedItem("fileinfo" ));
  2. oData.append( "CustomField", "This is some extra data" );
  3. var oReq = new XMLHttpRequest();
  4. oReq.open( "POST", "stash.php" , true );
  5. oReq.onload = function(oEvent) {
  6. if (oReq.status == 200) {
  7. oOutput.innerHTML = "Uploaded!" ;
  8. } else {
  9. oOutput.innerHTML = "Error " + oReq.status + " occurred uploading your file.<br \/>";
  10. }
  11. };
  12. oReq.send(oData);
 
 
使用FormData,进行Ajax请求并上传文件

这里使用JQuery,但是老版本的JQuery比如1.2是不支持的,最好使用2.0或更新版本:
  1. <form id= "uploadForm">
  2. <p >指定文件名: <input type="text" name="filename" value= ""/></p >
  3. <p >上传文件: <input type="file" name="file"/></ p>
  4. <input type="button" value="上传" onclick="doUpload()" />
  5. </form>
  1. function doUpload() {
  2. var formData = new FormData($( "#uploadForm" )[0]);
  3. $.ajax({
  4. url: 'http://localhost:8080/cfJAX_RS/rest/file/upload' ,
  5. type: 'POST',
  6. data: formData,
  7. async: false,
  8. cache: false,
  9. contentType: false,
  10. processData: false,
  11. success: function (returndata) {
  12. alert(returndata);
  13. },
  14. error: function (returndata) {
  15. alert(returndata);
  16. }
  17. });
  18. }

[转] 通过Ajax方式上传文件,使用FormData进行Ajax请求的更多相关文章

  1. Ajax方式上传文件

    用到两个对象 第一个对象:FormData 第二个对象:XMLHttpRequest 目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这两个对象,但IE9尚未支持 For ...

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

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

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

    通过传统的form表单提交的方式上传文件: <form id= "uploadForm" action= "http://localhost:8080/cfJAX_ ...

  4. Ajax方式上传文件报错"Uncaught TypeError: Illegal invocation"

    今天使用ajax上传文件时,出现了错误.数据传输的方式是通过定义formData完成的,提交的文件对象也设置为dom对象,但是还是不能发送请求.F12看到后台报了个错误:Uncaught TypeEr ...

  5. 通过Ajax方式上传文件(input file),使用FormData进行Ajax请求

    <script type="text/jscript"> $(function () { $("#btn_uploadimg").click(fun ...

  6. 【2】通过Ajax方式上传文件(图片),使用FormData进行Ajax请求

    HTML: <form id= "uploadForm"> <p >指定文件名: <input type="text" name= ...

  7. jQuery Ajax方式上传文件实现暂停或取消上传

    未上传时要实现取消,很简单... 但如果用户点击了上传,并加载了进度信息... 2017-05-04再次改进.在上传过程中用户可以按 Esc 来取消上传(取消当前上传,或者是全部上传)... 也可以在 ...

  8. ajax如何上传文件(整理)

    ajax如何上传文件(整理) 一.总结 一句话总结:用FormData,FormData+ajax=异步上传二进制文件 <form enctype="multipart/form-da ...

  9. egg.js 通过 form 和 ajax 两种方式上传文件并自定义目录和文件名

    egg.js 通过 form 和 ajax 两种方式上传文件并自定义目录和文件名 评论:10 · 阅读:8437· 喜欢:0 一.需求 二.CSRF 校验 三.通过 form 表单上传文件 四.通过 ...

随机推荐

  1. 史上最全 40 道 Dubbo 面试题及答案

    https://blog.csdn.net/zl1zl2zl3/article/details/83721147

  2. HDU - 3521 An easy Problem(矩阵快速幂)

    http://acm.hdu.edu.cn/showproblem.php?pid=3521 题意 对于矩阵A,求e^A的值. 分析 这个定眼一看好像很熟悉,就是泰勒展开,可惜自己的高数已经还给老师了 ...

  3. VSCode 拓展插件推荐

    想让VS code干活快起来,插件少不了,开始吧: 快捷键:Ctrl+Shift+X打开插件搜索安装即可 (安装的插件通常会保存在这个目录:C:\Users\你的系统登录用户如administrato ...

  4. 如何理解<base href="<%=basePath%>"

    原文链接http://316325524.blog.163.com/blog/static/6652052320111118111620897/ "base href " 今天在写 ...

  5. BZOJ:1816 [Cqoi2010]扑克牌 (贪心或二分答案)

    题面 \(solution:\) 这道题难就难在你能否读懂题目的意思,我们将它翻译一下: 现在我有n根竹子(每根竹子有\(c_i\)节,每节竹子高度为1),我可以通过消耗一点法力值使某一根竹子的某两节 ...

  6. java gc

    mark下来 https://plumbr.eu/handbook/what-is-garbage-collection

  7. ROS Kinetic Install on Debian 9

    Not Succesed! 1.  配置源$ sudo sh -c 'echo "deb http://packages.ros.org/ros/ubuntu $(lsb_release - ...

  8. 简述JavaScript全局对象

    全局对象是JavaScript中非常重要的一类对象,它作为程序顶层(程序最顶端,不包括在任何函数之内)的上下文存在,JavaScript中的全局属性.全局函数都是通过全局对象来提供给程序的,比如 全局 ...

  9. oracle 远程导入导出(本地win)

    导出 exp hongtastock_account/hongtastock_account@192.168.1.22/orcl file=D:\hongta\hongtastock_account. ...

  10. HTML学习笔记09-列表

    HTML支持无序,有序,自定义列表 列表项内部可以使用段落.换行符.图片.连接.以及其他列表等 无序列表 无序列表使用粗体圆点(典型的小黑圆圈)进行标记,列表始于<ul>标签,列表项使用& ...