[转] 通过Ajax方式上传文件,使用FormData进行Ajax请求
- <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>
- $.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);
- }
- });
关于FormData及其用法
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 |
- 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);
这里使用JQuery,但是老版本的JQuery比如1.2是不支持的,最好使用2.0或更新版本:
- <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>
- 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);
- }
- });
- }
[转] 通过Ajax方式上传文件,使用FormData进行Ajax请求的更多相关文章
- Ajax方式上传文件
用到两个对象 第一个对象:FormData 第二个对象:XMLHttpRequest 目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这两个对象,但IE9尚未支持 For ...
- koa2:通过Ajax方式上传文件,使用FormData进行Ajax请求
koa2通过表单上传的网上很多,但通过Ajax方式上传文件,使用FormData进行Ajax请求,不好找. 参考了这个用base64上传图片的例子.https://github.com/Yuki-Mi ...
- 通过Ajax方式上传文件,使用FormData进行Ajax请求
通过传统的form表单提交的方式上传文件: <form id= "uploadForm" action= "http://localhost:8080/cfJAX_ ...
- Ajax方式上传文件报错"Uncaught TypeError: Illegal invocation"
今天使用ajax上传文件时,出现了错误.数据传输的方式是通过定义formData完成的,提交的文件对象也设置为dom对象,但是还是不能发送请求.F12看到后台报了个错误:Uncaught TypeEr ...
- 通过Ajax方式上传文件(input file),使用FormData进行Ajax请求
<script type="text/jscript"> $(function () { $("#btn_uploadimg").click(fun ...
- 【2】通过Ajax方式上传文件(图片),使用FormData进行Ajax请求
HTML: <form id= "uploadForm"> <p >指定文件名: <input type="text" name= ...
- jQuery Ajax方式上传文件实现暂停或取消上传
未上传时要实现取消,很简单... 但如果用户点击了上传,并加载了进度信息... 2017-05-04再次改进.在上传过程中用户可以按 Esc 来取消上传(取消当前上传,或者是全部上传)... 也可以在 ...
- ajax如何上传文件(整理)
ajax如何上传文件(整理) 一.总结 一句话总结:用FormData,FormData+ajax=异步上传二进制文件 <form enctype="multipart/form-da ...
- egg.js 通过 form 和 ajax 两种方式上传文件并自定义目录和文件名
egg.js 通过 form 和 ajax 两种方式上传文件并自定义目录和文件名 评论:10 · 阅读:8437· 喜欢:0 一.需求 二.CSRF 校验 三.通过 form 表单上传文件 四.通过 ...
随机推荐
- 史上最全 40 道 Dubbo 面试题及答案
https://blog.csdn.net/zl1zl2zl3/article/details/83721147
- HDU - 3521 An easy Problem(矩阵快速幂)
http://acm.hdu.edu.cn/showproblem.php?pid=3521 题意 对于矩阵A,求e^A的值. 分析 这个定眼一看好像很熟悉,就是泰勒展开,可惜自己的高数已经还给老师了 ...
- VSCode 拓展插件推荐
想让VS code干活快起来,插件少不了,开始吧: 快捷键:Ctrl+Shift+X打开插件搜索安装即可 (安装的插件通常会保存在这个目录:C:\Users\你的系统登录用户如administrato ...
- 如何理解<base href="<%=basePath%>"
原文链接http://316325524.blog.163.com/blog/static/6652052320111118111620897/ "base href " 今天在写 ...
- BZOJ:1816 [Cqoi2010]扑克牌 (贪心或二分答案)
题面 \(solution:\) 这道题难就难在你能否读懂题目的意思,我们将它翻译一下: 现在我有n根竹子(每根竹子有\(c_i\)节,每节竹子高度为1),我可以通过消耗一点法力值使某一根竹子的某两节 ...
- java gc
mark下来 https://plumbr.eu/handbook/what-is-garbage-collection
- ROS Kinetic Install on Debian 9
Not Succesed! 1. 配置源$ sudo sh -c 'echo "deb http://packages.ros.org/ros/ubuntu $(lsb_release - ...
- 简述JavaScript全局对象
全局对象是JavaScript中非常重要的一类对象,它作为程序顶层(程序最顶端,不包括在任何函数之内)的上下文存在,JavaScript中的全局属性.全局函数都是通过全局对象来提供给程序的,比如 全局 ...
- oracle 远程导入导出(本地win)
导出 exp hongtastock_account/hongtastock_account@192.168.1.22/orcl file=D:\hongta\hongtastock_account. ...
- HTML学习笔记09-列表
HTML支持无序,有序,自定义列表 列表项内部可以使用段落.换行符.图片.连接.以及其他列表等 无序列表 无序列表使用粗体圆点(典型的小黑圆圈)进行标记,列表始于<ul>标签,列表项使用& ...