博客已迁移到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异步上传文件的更多相关文章

  1. ajax异步上传文件和表单同步上传文件 的区别

    1. 用表单上传文件(以照片为例)-同步上传 html部分代码:这里请求地址index.php <!DOCTYPE html> <html lang="en"&g ...

  2. 基于Flask开发网站 -- 前端Ajax异步上传文件到后台

    大家好,我是辰哥~ 辰哥最近利用空闲时间在写一个在线可视化平台,过程中也觉得一些技术还是比较有意思的,所以就以模块化的形式分享出来.如:从网页界面(前端)上传文件到服务器(后端). 放一下该模块的界面 ...

  3. ajax异步上传文件FormDate方式,html支持才可使用

    今天需要做一个头像的预览功能,所以我想到了异步上传文件. 总结几点: 异步上传难点: 文件二进制流如何获取 是否需要设置表单的头,就是content-Type那里.异步,所以无所谓了吧. 其他就差不多 ...

  4. 使用ajax异步上传文件或图片(配合php)

    //html代码 <form enctype="multipart/form-data" id="upForm"> <input type=& ...

  5. 使用Ajax异步上传文件

    之前上传文件都是用表单form设置post请求和enctype类型: <form id="upload_form"action="" method=&qu ...

  6. Ajax 异步上传文件

    需要引用js jquery.form 前端代码 <form action="/Save" id="mainForm" method="post& ...

  7. ajax异步上传文件之data参数----小哈学js

    下载ajaxFileUpload.js(下载网址:http://fileuploadajax.codeplex.com/downloads/get/20976) 修改ajaxFileUpload.js ...

  8. (H5)FormData+AJAX+SpringMVC跨域异步上传文件

    最近都没时间整理资料了,一入职就要弄懂业务,整天被业务弄得血崩. 总结下今天弄了一个早上的跨域异步上传文件.主要用到技术有HTML5的FormData,AJAX,Spring MVC. 首先看下上传页 ...

  9. html5+php实现文件的断点续传ajax异步上传

    html5+php实现文件的断点续传ajax异步上传 准备知识:断点续传,既然有断,那就应该有文件分割的过程,一段一段的传.以前文件无法分割,但随着HTML5新特性的引入,类似普通字符串.数组的分割, ...

随机推荐

  1. 大叔学ML第二:线性回归

    目录 基本形式 求解参数\(\vec\theta\) 梯度下降法 正规方程导法 调用函数库 基本形式 线性回归非常直观简洁,是一种常用的回归模型,大叔总结如下: 设有样本\(X\)形如: \[\beg ...

  2. js 大厦之JavaScript事件

    1.js事件简介 事件(Event) 是 JavaScript 应用跳动的心脏 ,进行交互,使网页动起来.也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了 ...

  3. redis5.0新特性

    1. redis5.0新特性 1.1. 新的Stream类型 1.1.1. 什么是Stream数据类型 抽象数据日志 数据流 1.2. 新的Redis模块API:Timers and Cluster ...

  4. 基于 jq 实现拖拽上传 APK 文件,js解析 APK 信息

    技术栈 jquery 文件上传:jquery.fileupload,github 文档 apk 文件解析:app-info-parser,github 文档 参考:前端解析ipa.apk安装包信息 - ...

  5. AI - 框架(Frameworks)

    1 - Scikit-Learn Sklearn(scikit-learn: machine learning in Python):https://scikit-learn.org/ 文档丰富而又详 ...

  6. java基础-2

    java基础-2 面向对象 定义 面向对象是一种思维方式,相对于面向过程​面向过程注重流程中的每一步,清楚流程中的每一个细节​面向对象注重的是对象,有了对象就有对象的一届​自己动手做--面向过程,找其 ...

  7. ASP.NET Core 2.1中基于角色的授权

    ASP.NET Core 2.1中基于角色的授权 授权是来描述用户能够做什么的过程.例如,只允许管理员用户可以在电脑上进行软件的安装以及卸载.而非管理员用户只能使用软件而不能进行软件的安装以及卸载.它 ...

  8. Android--多线程之AsyncTask

    前言 本片博客将介绍AsyncTask的使用,之前有介绍过线程和进程.而在AsyncTask中,运行在用户界面中,执行异步操作,并且把执行结果发布在UI线程上,且也不需要处理线程和Handler.在本 ...

  9. Android布局:宽度适应的横向跟随,防止挤掉重要视图

    不知道这样的布局该怎么描述,标题也是乱取的..直接上图吧 最近遇到了这样要求的布局: 1.上图中的“标题”长度不定,“状态”标签可能有多个并紧跟在标题右边,“属性”一直居右显示: 2.当“标题”过长, ...

  10. 动车上的书摘-java对象流与序列化

    摘要: 摘要: 原创出处: http://www.cnblogs.com/Alandre/ 泥沙砖瓦浆木匠 希望转载,保留摘要,谢谢! 钢笔不限贵便宜,书法是来自心对手的交流.-泥沙砖瓦浆木匠 一.对 ...