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. Mybatis Hibernate MiniDao 共存

    Mybatis MiniDao共存问题 - 国内版 Binghttps://cn.bing.com/search?q=Mybatis+MiniDao%E5%85%B1%E5%AD%98%E9%97%A ...

  2. snmpwalk 安装与使用详解-windows下

    snmpwalk是SNMP的一个工具,它使用SNMP的GETNEXT请求查询指定OID(SNMP协议中的对象标识)入口的所有OID树信息,并显示给用户.通过snmpwalk也可以查看支持SNMP协议( ...

  3. Flutter AppBar 自定义顶部导航按钮 图标、颜色 以及 TabBar 定义顶部 Tab 切换

    Flutter AppBar 自定义顶部按钮图 标.颜色 属性 描述 leading 在标题前面显示的一个控件,在首页通常显示应用 的 logo;在其他界面通常显示为返回按钮 title 标题,通常显 ...

  4. typeScript模块<一>

    /*模块 模块的的概念 模块导出的几种方法 1.export 导出声明 2.export 导出语句 3.export default 4.import导入模块 模块化封装上一讲的DB库 */ /* 模 ...

  5. 查看Oracle中是否有锁表

    转: 查看Oracle中是否有锁表 2018-04-23 17:59 alapha 阅读(19450) 评论(0) 编辑 收藏 一.用dba用户登录,或者将用户赋权为DBA用户 命令: su - or ...

  6. 报错：HDFS IO error org.apache.hadoop.security.AccessControlException: Permission denied: user=root, access=WRITE, inode="/yk/dl/alarm_his":hdfs:supergroup:drwxr-xr-x

    报错背景: CDH集成了Flume服务,准备通过Flume将kafka中的数据放到HDFS中, 启动Flume的时候报错. 报错现象: // :: INFO hdfs.HDFSDataStream: ...

  7. Hello log4net——做一个实用好用的log4net的demo（转）

    log4net使用指南  (对配置解释比较全面细致,建议做完demo后多看) Log4Net使用详解(周公)——点击打开链接 Log4Net使用详解(续)周公——点击打开链接 点击打开链接 点击打开链 ...

  8. DELPHI 数据库操作类（工具类）

    DELPHI 数据库连接类 做的时候目地是可以通过类的创建和释放进行数据库的短连接,在做服务端的时候每一个请求都通过类生成一个数据连接 unit UnDm; interface uses SysUti ...

  9. Connection reset by peer引发的思考

    http://www.mamicode.com/info-detail-506381.html

  10. 问题（一）升级Appium最新遇到滑动的坑

    Appium的JAVA客户端更新到java-client 6.0.0-BETA3后,发现其中有关于界面滑动(swipe TouchAction)方面的升级(也有可能在之前的版本已经更新过类似的内容,没 ...