Ajax上传文件
来源:互联网 发布:数学画图软件 编辑:程序博客网 时间:2024/06/02 06:52
通过Ajax方式上传文件,使用FormData进行Ajax请求
目前我做到的程度是可以实现上传多个文件,只是不是一次性选择,而是多个按钮。
这样的话,
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;try {request.setCharacterEncoding("utf-8");} catch (UnsupportedEncodingException e2) {log.error("文件上传编码异常" + e2, e2);}Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();
语句执行后,fileMap中就有多个文件了,而且执行完毕,不会发生页面跳转
- 博客分类:
- RESTful Web Services
- Web前端开发
通过Ajax方式上传文件使用FormData进行Ajax请求
通过传统的form表单提交的方式上传文件:
- <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的方式进行请求的:
- $.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+。
这里只展示一个通过from表单来初始化FormData的方式
<form enctype="multipart/form-data" method="post" name="fileinfo">
- 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或更新版本:
- <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);
- }
- });
- }
阅读全文
0 0
- ajax上传文件
- 模仿AJAX上传文件
- ajax文件上传
- ajax文件上传应用
- ajax 文件上传进度条
- jQuery AJAX 文件上传
- C#+ajax上传文件
- ajax上传文件
- ajaxfileupload ajax文件上传
- 浅析Ajax文件上传
- Ajax 上传文件
- jquery ajax 文件上传
- Ajax上传文件
- Ajax文件上传
- ajax上传文件
- ajax上传文件
- Ajax实现文件上传
- Ext ajax上传文件
- js获取手机型号和手机操作系统版本号
- qsort函数用法说明2
- 2.1.24—线性表—Single Number II
- 字符串
- HTML/css理解before:after:学习之-导航条案例2
- Ajax上传文件
- 数据结构——复习C语言
- 求素数(普通+筛选)
- 【资源共享】《Rockchip_android7.1_wifi_配置说明V1.4》
- 微信小程序项目实践 上线中
- 网络编程中的close和shutdown
- hiho一下 第160周 压缩字符串
- 2017技术学习目标
- Mysql问题:can't get hostname for your address