1.html部分实现代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件上传</title>
</head>
<body>
<form id= "uploadForm">
<p >指定文件名: <input type="text" name="filename" value= ""/></p >
<p >上传文件: <input type="file" name="file1" id="file1" multiple="multiple" /></p>
<p >上传文件: <input type="file" name="file2" id="file2" /></p>
<p >上传文件: <input type="file" name="file3" id="file3" /></p>
<input type="button" value="上传" onclick="doUpload()" />
</form>
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript">
//获取token
var token = parent.window.document.getElementById("token").value; function doUpload() {
var formData = new FormData();
formData.append("token", token);
formData.append("file1", $('#file1')[0].files[0]);
formData.append("file2", $('#file2')[0].files[0]);
formData.append("file3", $('#file3')[0].files[0]);
$.ajax({
url: 'bookController/uploadMult' ,
type: 'post',
data: formData,
cache: false,
processData: false,
contentType: false,
async: false
}).done(function(res) { }).fail(function(res) { });
} </script>
</body>
</html>

2.后台部分:

多文件上传方式处理:

    @RequestMapping(value = "/uploadMult", method = RequestMethod.POST)
@ResponseBody
public String uploadMult(HttpServletRequest request) {
// 转型为MultipartHttpRequest:
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
// 获得文件:
List<MultipartFile> files = multipartRequest.getFiles("file1");
List<MultipartFile> files2 = multipartRequest.getFiles("file2");
List<MultipartFile> files3 = multipartRequest.getFiles("file3"); if (files.isEmpty()) {
return "false";
} String path = "F:/test"; for (MultipartFile file : files) {
String fileName = file.getOriginalFilename();
int size = (int) file.getSize();
System.out.println(fileName + "-->" + size); if (file.isEmpty()) {
return "false";
} else {
File dest = new File(path + "/" + fileName);
if (!dest.getParentFile().exists()) { // 判断文件父目录是否存在
dest.getParentFile().mkdir();
}
try {
file.transferTo(dest);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
return "false";
}
}
}
return "true";
}

单个文件上传方式处理:

    @RequestMapping(value = "/upload", method = RequestMethod.POST)
@ResponseBody
public String upload(@RequestParam("file") MultipartFile file, HttpServletRequest request) {
String contentType = file.getContentType();
String fileName = file.getOriginalFilename();
/*
* System.out.println("fileName-->" + fileName);
* System.out.println("getContentType-->" + contentType);
*/
String filePath = request.getSession().getServletContext().getRealPath("upload/");
try {
uploadFile(file.getBytes(), filePath, fileName);
} catch (Exception e) {
// TODO: handle exception
}
// 返回json
System.out.println("上传成功!");
return "true";
} public static void uploadFile(byte[] file, String filePath, String fileName) throws Exception {
File targetFile = new File(filePath);
if (!targetFile.exists()) {
targetFile.mkdirs();
}
FileOutputStream out = new FileOutputStream(filePath + fileName);
out.write(file);
out.flush();
out.close();
}

springboot文件上传参数配置:在application.properties文件中配置上传大小限制:

#文件上传
#Spring Boot 1.3.x或者之前 multipart.maxFileSize=800Kb
multipart.maxRequestSize=1000Mb #Spring Boot 1.4.x或者之后 spring.http.multipart.maxFileSize=100Mb
spring.http.multipart.maxRequestSize=1000Mb #maxFileSize 是单个文件大小
#maxRequestSize是设置总上传的数据大小

ajax实现文件上传,多文件上传,追加参数的更多相关文章

  1. 对Ajax连接的认识~为毛不能上传文件!!!

    最近做毕设的时候需要用到上传图片的功能,但是我的毕设全部的传输都是基于ajax的请求,百度了一圈发现TMD居然说ajax不能上传文件!!当时我就不乐意了啊,那难道其他人都用的是黑科技吗?!又来网上的大 ...

  2. springMvc 使用ajax上传文件,返回获取的文件数据 附Struts2文件上传

    总结一下 springMvc使用ajax文件上传 首先说明一下,以下代码所解决的问题 :前端通过input file 标签获取文件,通过ajax与后端交互,后端获取文件,读取excel文件内容,返回e ...

  3. ajax上传文件,并检查文件类型、检查文件大小

    1.使用ajaxfileupload.js的插件,但是对插件做了一处修改,才能够正常使用 修改的部分如下: uploadHttpData: function (r, type) { var data ...

  4. jQuery+php+ajax+PHPExcel实现上传excel文件导入数据库

            项目中需要批量导入数据,感觉这个需求以后也会经常用,必须总结分享下: 引入jquery的第三方表单插件: <scripttype="text/javascript&qu ...

  5. Ajax技术——带进度条的文件上传

    1.概述 在实际的Web应该开发或网站开发过程中,经常需要实现文件上传的功能.在文件上传过程中,经常需要用户进行长时间的等待,为了让用户及时了解上传进度,可以在上传文件的同时,显示文件的上传进度条.运 ...

  6. Ajax实现带进度条的文件上传

    Ajax实现带进度条的文件上传 文件上传页面运行效果 上传文件并显示进度条运行效果 代码如下; DiskFileItemFactory factory = new DiskFileItemFactor ...

  7. ajax +jsp+iframe无刷新上传文件[转]

    http://hi.baidu.com/zj360202/blog/item/f23e3711f929c774cb80c475.html ajax jsp 无刷新上传文件 2009-10-26 16: ...

  8. 【文件上传】文件上传的form表单提交方式和ajax异步上传方式对比

    一.html 表单代码 …… <input type="file" class="file_one" name="offenderExcelFi ...

  9. 服务器文档下载zip格式 SQL Server SQL分页查询 C#过滤html标签 EF 延时加载与死锁 在JS方法中返回多个值的三种方法(转载) IEnumerable,ICollection,IList接口问题 不吹不擂,你想要的Python面试都在这里了【315+道题】 基于mvc三层架构和ajax技术实现最简单的文件上传 事件管理

    服务器文档下载zip格式   刚好这次项目中遇到了这个东西,就来弄一下,挺简单的,但是前台调用的时候弄错了,浪费了大半天的时间,本人也是菜鸟一枚.开始吧.(MVC的) @using Rattan.Co ...

  10. ajax 提交所有表单内容及上传图片(文件),以及单独上传某个图片(文件)

    我以演示上传图片为例子: java代码如下(前端童鞋可以直接跳过看下面的html及js): package com.vatuu.web.action; import java.io.File; imp ...

随机推荐

  1. Python脚本基础运算和算法

    原文地址:https://www.cnblogs.com/ailiailan/p/10141741.html 通过关注“常见”脚本,是对代码的一个很好的学习和总结的方式. 1.冒泡排序 lis = [ ...

  2. Nessus更新到8.6.0

    Nessus更新到8.6.0 此次更新,变化主要有以下几点:(1)加强过期提醒.购买链接,并且允许用户启用关闭提醒功能.(2)Nessus基础班和试用版中,导出的报告默认带有水印.(3)Nessus企 ...

  3. PHP 对象继承

    对象继承 继承已为大家所熟知的一个程序设计特性,PHP 的对象模型也使用了继承.继承将会影响到类与类,对象与对象之间的关系. 比如,当扩展一个类,子类就会继承父类所有公有的和受保护的方法.除非子类覆盖 ...

  4. Dart抽象类和多态

    /* Dart中抽象类: Dart抽象类主要用于定义标准,子类可以继承抽象类,也可以实现抽象类接口. 1.抽象类通过abstract 关键字来定义 2.Dart中的抽象方法不能用abstract声明, ...

  5. java连接数据库失败:java.sql.SQLException: Access denied for user 'root'@'localhost' (using password: YES)

    说一下我的情况: 在测试环境中运行没有任何问题,但是导出war包之后,就将war包上传到线上服务器的webapps目录下,然后启动Tomcat,等待Tomcat将上传的war包解压(此时Tomcat没 ...

  6. synchronized 同步对象概念

    解决上述问题之前,先理解synchronized关键字的意义如下代码:   Object someObject =new Object(); synchronized (someObject){ // ...

  7. Qt编写自定义控件72-提示进度条

    一.前言 我们在很多的安装包中,在安装过程中,经常可以在底部看到一个漂亮的进度条,上面悬浮着显示对应的进度,然后底部进度多种颜色渐变展示,Qt自带的进度条或者操作系统的进度条样式,不够炫,这次索性直接 ...

  8. Linux记录-limits.conf 配置

    limits.conf 文件实际是 Linux PAM(插入式认证模块,Pluggable Authentication Modules)中 pam_limits.so 的配置文件,而且只针对于单个会 ...

  9. Mysql8.0.17版本不能自动创建activiti表的坑

    maven项目如下: 配置好数据库,和activiti的配置之后,开始执行流程部署 package com.yuanqiao.first_activiti.deployment; import jav ...

  10. 使用sql语句创建和删除约束示例代码

    使用sql语句创建和删除约束  约束类型 主键约束(Primary Key constraint) --:要求主键列数据唯一,并且不允许为空.  唯一约束(Unique constraint) --: ...