jsp页面

  1. <%@ page language="java" pageEncoding="UTF-8"%>
  2.  <!DOCTYPE HTML>
  3.  <html>
  4.    <head>
  5.    <script type="text/javascript" src="./js/jquery-3.5.1.min.js"></script>
  6.   <script type="text/javascript" src="./js/vue.js"></script>
  7.     <title>文件上传</title>
  8.    </head>
  9.    <body>
  10.    <h1>ajax异步上传文件</h1>
  11. <input type="file"  id="upload">
  12. <button id="but"onclick="oneUpload()" >上传</button>-->
  13.  
  14. <h1>ajax异步多文件上传</h1>
  15. <form id="fileForm">
  16.     <input type="file" name="files"  multiple="multiple" >
  17.     <input type="file" name="files"  multiple="multiple" >
  18.     <input type="button" id="btn_add_file" value="上传附件"  onclick="upload_files()">
  19. </form>
  20.     <script type="text/javascript">
  21.     //单文件上传
  22.     function oneUpload() {
  23.         var file = document.getElementById("upload").files[0];
  24.         var formData = new FormData();
  25.         formData.append("file", file);
  26.  
  27.         $.ajax({
  28.             type: 'POST',
  29.             url: '${pageContext.request.contextPath}/oneUpload.do',
  30.             processData: false,  //是否把上传的数据  处理为对象  默认为true
  31.             contentType: false,  //避免让jquery 设置请求头有可能会破坏分隔符。 而使服务器不能正常解析文件
  32.             data:formData,
  33.             success: function (data) {
  34.                 alert(data);
  35.             }
  36.         })
  37.     }
  38.  
  39. //多文件上传
  40.     function upload_files(){
  41.     	 var formData = new FormData($("#fileForm")[0]);
  42.          $.ajax({
  43.              type: 'POST',
  44.              url:'${pageContext.request.contextPath}/allUpload.do',
  45.              processData: false,  //是否把上传的数据  处理为对象  默认为true
  46.              contentType: false,  //避免让jquery 设置请求头有可能会破坏分隔符。 而使服务器不能正常解析文件
  47.              data:formData,
  48.              success: function (data) {
  49.                  alert(data);
  50.              }
  51.          })
  52.     }
  53.  
  54. </script>
  55.  
  56.    </body>
  57.  </html>

　　java后端代码

  1. package com.zjn.controller;
  2.  
  3. import java.io.File;
  4. import java.io.FileOutputStream;
  5. import java.io.IOException;
  6. import java.io.InputStream;
  7. import java.io.OutputStream;
  8. import java.text.SimpleDateFormat;
  9. import java.util.Date;
  10. import java.util.HashMap;
  11. import java.util.List;
  12. import java.util.Map;
  13. import java.util.UUID;
  14.  
  15. import javax.servlet.http.HttpServletRequest;
  16.  
  17. import org.springframework.stereotype.Controller;
  18. import org.springframework.web.bind.annotation.RequestMapping;
  19. import org.springframework.web.bind.annotation.RequestParam;
  20. import org.springframework.web.bind.annotation.ResponseBody;
  21. import org.springframework.web.multipart.MultipartFile;
  22. import org.springframework.web.multipart.MultipartHttpServletRequest;
  23. @Controller
  24. public class AjaxUpload {
  25. 	/**
  26. 	     * 单文件上传
  27. 	     *
  28. 	     * @param file
  29. 	     * @param request
  30. 	     * @return
  31. 	     */
  32. 	    @RequestMapping("/oneUpload")
  33. 	    @ResponseBody
  34. 	    public String oneUploadFile(MultipartFile file, HttpServletRequest request) {
  35. 	        String path = "D://图片/img/";
  36. 	        //String data = sft.format(new Date());
  37. 	        String fileName = file.getOriginalFilename();
  38. 	        String lastStr = fileName.substring(fileName.lastIndexOf("."));
  39. 	        if (".txt".equals(lastStr)) {
  40.  
  41. 	            return "文件格式不正确";
  42. 	        }
  43. 	        ;
  44. 	        File file1 = new File(path);
  45. 	        if (!file1.exists()) {
  46. 	            file1.mkdirs();
  47. 	        }
  48.  
  49. 	        String newName = UUID.randomUUID().toString().replace("-", "") + fileName;
  50. 	        try {
  51. 	            file.transferTo(new File(file1, newName));
  52. 	            String url = path + "/" + newName;
  53. 	            System.out.println(url);
  54. 	            return url;
  55. 	        } catch (IOException e) {
  56. 	            e.printStackTrace();
  57. 	        }
  58. 	        //文件存储路径
  59.  
  60. 	        return "error";
  61. 	    }
  62.  
  63. 	    /**
  64. 	     * 多文件上传
  65. 	     *
  66. 	     * @param list
  67. 	     * @param request
  68. 	     * @return
  69. 	     */
  70. 	    @RequestMapping("/allUpload")
  71. 	    @ResponseBody
  72. 	    public String allUploadFile(@RequestParam(value = "files") List<MultipartFile> list, HttpServletRequest request) {
  73. 	    	System.out.println("list====="+list);
  74.  
  75. 	        String path = "D://图片/allImg/";
  76. 	        for (MultipartFile file : list) {
  77. 	            String fileName = file.getOriginalFilename();
  78. 	            String lastStr = fileName.substring(fileName.lastIndexOf("."));
  79. 	            ;
  80. 	            File file1 = new File(path);
  81. 	            if (!file1.exists()) {
  82. 	                file1.mkdirs();
  83. 	            }
  84. 	            String newName = UUID.randomUUID().toString().replace("-", "") + fileName;
  85. 	            try {
  86. 	                file.transferTo(new File(file1, newName));
  87. 	                String url = path+ "/" + newName;
  88. 	                System.out.println(url);
  89. 	            } catch (IOException e) {
  90. 	                e.printStackTrace();
  91. 	            }
  92. 	        }
  93.  
  94. 	        //文件存储路径
  95.  
  96. 	        return "success";
  97. 	    }
  98.  
  99. }

　　

使用ajax请求上传多个或者多个附件的更多相关文章

  1. SSM框架下,使用ajax请求上传文件(doc\docx\excel\图片等)

    1.准备工作 1.1.添加上传必要jar包 <dependency> <groupId>commons-io</groupId> <artifactId> ...

  2. 使用FormData进行Ajax请求上传文件

    Servlet3.0开始提供了一系列的注解来配置Servlet.Filter.Listener等等.这种方式可以极大的简化在开发中大量的xml的配置.从这个版本开始,web.xml可以不再需要,使用相 ...

  3. iframe和form表单实现ajax请求上传数据

    form的target属性设置为iframe的name值时,表示提交到url后返回的数据显示到iframe区域 <form action="/upload.html" met ...

  4. koa2：通过Ajax方式上传文件，使用FormData进行Ajax请求

    koa2通过表单上传的网上很多,但通过Ajax方式上传文件,使用FormData进行Ajax请求,不好找. 参考了这个用base64上传图片的例子.https://github.com/Yuki-Mi ...

  5. Ajax（form表单文件上传、请求头之contentType、Ajax传递json数据、Ajax文件上传）

    form表单文件上传 上菜 file_put.html <form action="" method="post" enctype="multi ...

  6. 使用ajax提交form表单，包括ajax文件上传

    前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){ ... },"json"); 又或者是这样的aja ...

  7. 那些年，我们在Django web开发中踩过的坑（一）——神奇的‘/’与ajax+iframe上传

    一.上传图片并在前端展示 为了避免前端整体刷新,我们采用ajax+iframe(兼容所有浏览器)上传,这样用户上传之后就可以立即看到图片: 上传前: 上传后: 前端部分html: <form s ...

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

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

  9. ajax 文件上传，ajax

    ajax 文件上传,ajax 啥也不说了,直接上代码! <input type="file" id="file" name="myfile&qu ...

随机推荐

  1. CentOS 6.5 iso系统定制

    前言 更改CentOS6.5背景图片.CentOS标题为DntOS,总之就是用ISO安装或者安装后的系统启动时不能有CentOS标志. ISO光盘目录介绍: (1)isolinux 目录存放光盘启动时 ...

  2. 16.java设计模式之迭代器模式

    基本需求: 展示一个学校的结构,比如一个学校下面有多个学院,学院下面有多个系,对其节点主要是遍历,与组合模式略有不同 传统方案: 学校<-学院<-系 依次继承 这种方式,在一个页面中展示出 ...

  3. linux 权限提升

    1.内核提权,根据版本搜索相应exp 查看操作系统版本命令 uname –a lsb_release –a cat /proc/version 查看内核版本 cat /etc/issue 查看发行类型 ...

  4. 题解 洛谷 P3396 【哈希冲突】（根号分治）

    根号分治 前言 本题是一道讲解根号分治思想的论文题(然鹅我并没有找到论文),正 如论文中所说,根号算法--不仅是分块,根号分治利用的思想和分块像 似却又不同,某一篇洛谷日报中说过,分块算法实质上是一种 ...

  5. Java 安全之Java Agent

    Java 安全之Java Agent 0x00 前言 在前面发现很多技术都会去采用Java Agent该技术去做实现,比分说RASP和内存马(其中一种方式).包括IDEA的这些破解都是基于Java A ...

  6. Spring Cloud Alibaba 初体验(二) Nacos 服务注册与发现 + 集成 Spring Cloud Gateway

    一.服务注册 添加依赖: <dependency> <groupId>com.alibaba.cloud</groupId> <artifactId>s ...

  7. 用java以正确的姿势刷CSP

    许多程序算法考试中,用java是个不错的选择,它几乎实现了所有c++能实现的,所以越来越受Acmer的欢迎.总结一下用到的一些技巧和方法.更多关于csp的可参考海岛blog|皮卡丘 1． 输出 规格化 ...

  8. moviepy音视频剪辑：与time时间线相关的变换函数freeze_region、make_loopable、speedx、time_mirror、time_symmetrize介绍

    ☞ ░ 前往老猿Python博文目录 ░ 一.引言 在<moviepy音视频剪辑:moviepy中的剪辑基类Clip详解>介绍了剪辑基类的fl.fl_time.fx方法,在<movi ...

  9. 第8.32节 Python中重写__delattr__方法捕获属性删除

    一. 引言 上节介绍了__delattr__方法在Python清除实例属性时被捕获执行,本节结合例子介绍重写__delattr__方法,并说明__delattr__方法执行的触发逻辑. 二. 重写__ ...

  10. PyQt（Python+Qt）学习随笔：树型部件QTreeWidget中使用sortItems进行项排序

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 树型部件QTreeWidget中的项可以使用sortItems方法按照指定列进行排序,调用语法: s ...