Spring使用ajax异步上传文件
博客已迁移到CSDN《https://blog.csdn.net/qq_33375499》 单文件上传
<!-- 创建文件选择框 -->
文件上传 :<input type="file" id="file" name="filename" />
AJAX获取数据并进行上传:
// 创建formData对象,用于保存ajax上传的参数信息
var formData = new FormData();
// 获取要上传的文件file
var files = document.getElementById("file").files;
if(files.length <= 0){
alert("请选择文件");
return;
}
var file = files[0];
// 将文件添加到formData对象中
formData.append("file",file);
// ajax 异步上传
$.ajax({
type:"post",
url:"upload.do",// 上传请求url
data:formData,// 上传参数
processData : false,// 必须,设置不转换为string,默认为true
contentType : false,
success:function(data){
alert("上传成功");
},
error:function(e){
alert("上传失败");
}
});
后台数据接收action(controller)代码
第一种:使用Springmvc自带注解接收文件
@RequestMapping("upload.do") public void upload(@RequestParam(value="file")MultipartFile file) throws Exception {// 使用RequestParam注解接收参数,value值为formData中文件对应的key值
// 文件名称
file.getOriginalFilename();
// 文件字节数组
file.getBytes(); ... }
第二种:用HttpServletRequest接收文件
@RequestMapping("upload.do") public void upload() throws Exception {
MultipartHttpServletRequest multipartHttpServletRequest = (MultipartHttpServletRequest) request;// request转换
MultipartFile file = multipartHttpServletRequest.getFile("file"); // 参数为fromData中文件的key值
// 文件名称
file.getOriginalFilename(); // 文件字节数组
file.getBytes(); ... }
多文件上传
<!-- 创建文件选择框 -->
文件上传1 :<input type="file" id="file1" name="filename" />
文件上传2 :<input type="file" id="file2" name="filename" />
文件上传3 :<input type="file" id="file3" name="filename" />
AJAX获取数据并进行上传:
// 创建formData对象,用于保存ajax上传的参数信息
var formData = new FormData();
// 获取要上传的文件file
var files = document.getElementsByName("filename");
for (var i = 0, len = files.length; i < len; i++){
var fs = files[i].files;
if(fs.length <= 0){
alert("请先上传文件");
return;
}
// 将文件添加到formData对象中
formData.append("files",fs[0]);
}
// ajax 异步上传
$.ajax({
type:"post",
url:"upload.do",// 上传请求url
data:formData,// 上传参数
processData : false,// 必须,设置不转换为string,默认为true
contentType : false,
success:function(data){
alert("上传成功");
},
error:function(e){
alert("上传失败");
}
});
后台数据接收action(controller)代码
第一种:使用Springmvc自带注解接收文件
@RequestMapping("upload.do")
public void upload(@RequestParam(value="files")MultipartFile[] files) throws Exception {// 使用RequestParam注解接收参数,value值为formData中文件对应的key值
for(int i = 0,len = files.length; i < len; i++){
// 文件名称
files[i].getOriginalFilename();
// 文件字节数组
files[i].getBytes();
}
...
}
第二种:用HttpServletRequest接收文件
@RequestMapping("upload.do")
public void upload() throws Exception {
MultipartHttpServletRequest multipartHttpServletRequest = (MultipartHttpServletRequest) request;// request转换
MultipartFile[] files = multipartHttpServletRequest.getFiles("files"); // 参数为fromData中文件的key值
for(int i = 0,len = files.length; i < len; i++){
// 文件名称
files[i].getOriginalFilename();
// 文件字节数组
files[i].getBytes();
}
...
}
Spring使用ajax异步上传文件的更多相关文章
- ajax异步上传文件和表单同步上传文件 的区别
1. 用表单上传文件(以照片为例)-同步上传 html部分代码:这里请求地址index.php <!DOCTYPE html> <html lang="en"&g ...
- 基于Flask开发网站 -- 前端Ajax异步上传文件到后台
大家好,我是辰哥~ 辰哥最近利用空闲时间在写一个在线可视化平台,过程中也觉得一些技术还是比较有意思的,所以就以模块化的形式分享出来.如:从网页界面(前端)上传文件到服务器(后端). 放一下该模块的界面 ...
- ajax异步上传文件FormDate方式,html支持才可使用
今天需要做一个头像的预览功能,所以我想到了异步上传文件. 总结几点: 异步上传难点: 文件二进制流如何获取 是否需要设置表单的头,就是content-Type那里.异步,所以无所谓了吧. 其他就差不多 ...
- 使用ajax异步上传文件或图片(配合php)
//html代码 <form enctype="multipart/form-data" id="upForm"> <input type=& ...
- 使用Ajax异步上传文件
之前上传文件都是用表单form设置post请求和enctype类型: <form id="upload_form"action="" method=&qu ...
- Ajax 异步上传文件
需要引用js jquery.form 前端代码 <form action="/Save" id="mainForm" method="post& ...
- ajax异步上传文件之data参数----小哈学js
下载ajaxFileUpload.js(下载网址:http://fileuploadajax.codeplex.com/downloads/get/20976) 修改ajaxFileUpload.js ...
- (H5)FormData+AJAX+SpringMVC跨域异步上传文件
最近都没时间整理资料了,一入职就要弄懂业务,整天被业务弄得血崩. 总结下今天弄了一个早上的跨域异步上传文件.主要用到技术有HTML5的FormData,AJAX,Spring MVC. 首先看下上传页 ...
- html5+php实现文件的断点续传ajax异步上传
html5+php实现文件的断点续传ajax异步上传 准备知识:断点续传,既然有断,那就应该有文件分割的过程,一段一段的传.以前文件无法分割,但随着HTML5新特性的引入,类似普通字符串.数组的分割, ...
随机推荐
- 大叔学ML第二:线性回归
目录 基本形式 求解参数\(\vec\theta\) 梯度下降法 正规方程导法 调用函数库 基本形式 线性回归非常直观简洁,是一种常用的回归模型,大叔总结如下: 设有样本\(X\)形如: \[\beg ...
- js 大厦之JavaScript事件
1.js事件简介 事件(Event) 是 JavaScript 应用跳动的心脏 ,进行交互,使网页动起来.也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了 ...
- redis5.0新特性
1. redis5.0新特性 1.1. 新的Stream类型 1.1.1. 什么是Stream数据类型 抽象数据日志 数据流 1.2. 新的Redis模块API:Timers and Cluster ...
- 基于 jq 实现拖拽上传 APK 文件,js解析 APK 信息
技术栈 jquery 文件上传:jquery.fileupload,github 文档 apk 文件解析:app-info-parser,github 文档 参考:前端解析ipa.apk安装包信息 - ...
- AI - 框架(Frameworks)
1 - Scikit-Learn Sklearn(scikit-learn: machine learning in Python):https://scikit-learn.org/ 文档丰富而又详 ...
- java基础-2
java基础-2 面向对象 定义 面向对象是一种思维方式,相对于面向过程面向过程注重流程中的每一步,清楚流程中的每一个细节面向对象注重的是对象,有了对象就有对象的一届自己动手做--面向过程,找其 ...
- ASP.NET Core 2.1中基于角色的授权
ASP.NET Core 2.1中基于角色的授权 授权是来描述用户能够做什么的过程.例如,只允许管理员用户可以在电脑上进行软件的安装以及卸载.而非管理员用户只能使用软件而不能进行软件的安装以及卸载.它 ...
- Android--多线程之AsyncTask
前言 本片博客将介绍AsyncTask的使用,之前有介绍过线程和进程.而在AsyncTask中,运行在用户界面中,执行异步操作,并且把执行结果发布在UI线程上,且也不需要处理线程和Handler.在本 ...
- Android布局:宽度适应的横向跟随,防止挤掉重要视图
不知道这样的布局该怎么描述,标题也是乱取的..直接上图吧 最近遇到了这样要求的布局: 1.上图中的“标题”长度不定,“状态”标签可能有多个并紧跟在标题右边,“属性”一直居右显示: 2.当“标题”过长, ...
- 动车上的书摘-java对象流与序列化
摘要: 摘要: 原创出处: http://www.cnblogs.com/Alandre/ 泥沙砖瓦浆木匠 希望转载,保留摘要,谢谢! 钢笔不限贵便宜,书法是来自心对手的交流.-泥沙砖瓦浆木匠 一.对 ...