jsp页面

<%@ page language="java" pageEncoding="UTF-8"%>

 <!DOCTYPE HTML>

 <html>

   <head>

   <script type="text/javascript" src="./js/jquery-3.5.1.min.js"></script>

  <script type="text/javascript" src="./js/vue.js"></script>

    <title>文件上传</title>

   </head>

   <body>

   <h1>ajax异步上传文件</h1>

<input type="file"  id="upload">

<button id="but"onclick="oneUpload()" >上传</button>-->

<h1>ajax异步多文件上传</h1>

<form id="fileForm">

    <input type="file" name="files"  multiple="multiple" >

    <input type="file" name="files"  multiple="multiple" >

    <input type="button" id="btn_add_file" value="上传附件"  onclick="upload_files()">

</form>

    <script type="text/javascript">

    //单文件上传

    function oneUpload() {

        var file = document.getElementById("upload").files[0];

        var formData = new FormData();

        formData.append("file", file);

        $.ajax({

            type: 'POST',

            url: '${pageContext.request.contextPath}/oneUpload.do',

            processData: false,  //是否把上传的数据  处理为对象  默认为true

            contentType: false,  //避免让jquery 设置请求头有可能会破坏分隔符。 而使服务器不能正常解析文件

            data:formData,

            success: function (data) {

                alert(data);

            }

        })

    }

//多文件上传

    function upload_files(){

    	 var formData = new FormData($("#fileForm")[0]);

         $.ajax({

             type: 'POST',

             url:'${pageContext.request.contextPath}/allUpload.do',

             processData: false,  //是否把上传的数据  处理为对象  默认为true

             contentType: false,  //避免让jquery 设置请求头有可能会破坏分隔符。 而使服务器不能正常解析文件

             data:formData,

             success: function (data) {

                 alert(data);

             }

         })

    }

</script>

   </body>

 </html>

　　java后端代码

package com.zjn.controller;

import java.io.File;

import java.io.FileOutputStream;

import java.io.IOException;

import java.io.InputStream;

import java.io.OutputStream;

import java.text.SimpleDateFormat;

import java.util.Date;

import java.util.HashMap;

import java.util.List;

import java.util.Map;

import java.util.UUID;

import javax.servlet.http.HttpServletRequest;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestParam;

import org.springframework.web.bind.annotation.ResponseBody;

import org.springframework.web.multipart.MultipartFile;

import org.springframework.web.multipart.MultipartHttpServletRequest;

@Controller

public class AjaxUpload {

	/**

	     * 单文件上传

	     *

	     * @param file

	     * @param request

	     * @return

	     */

	    @RequestMapping("/oneUpload")

	    @ResponseBody

	    public String oneUploadFile(MultipartFile file, HttpServletRequest request) {

	        String path = "D://图片/img/";

	        //String data = sft.format(new Date());

	        String fileName = file.getOriginalFilename();

	        String lastStr = fileName.substring(fileName.lastIndexOf("."));

	        if (".txt".equals(lastStr)) {

	            return "文件格式不正确";

	        }

	        ;

	        File file1 = new File(path);

	        if (!file1.exists()) {

	            file1.mkdirs();

	        }

	        String newName = UUID.randomUUID().toString().replace("-", "") + fileName;

	        try {

	            file.transferTo(new File(file1, newName));

	            String url = path + "/" + newName;

	            System.out.println(url);

	            return url;

	        } catch (IOException e) {

	            e.printStackTrace();

	        }

	        //文件存储路径

	        return "error";

	    }

	    /**

	     * 多文件上传

	     *

	     * @param list

	     * @param request

	     * @return

	     */

	    @RequestMapping("/allUpload")

	    @ResponseBody

	    public String allUploadFile(@RequestParam(value = "files") List<MultipartFile> list, HttpServletRequest request) {

	    	System.out.println("list====="+list);

	        String path = "D://图片/allImg/";

	        for (MultipartFile file : list) {

	            String fileName = file.getOriginalFilename();

	            String lastStr = fileName.substring(fileName.lastIndexOf("."));

	            ;

	            File file1 = new File(path);

	            if (!file1.exists()) {

	                file1.mkdirs();

	            }

	            String newName = UUID.randomUUID().toString().replace("-", "") + fileName;

	            try {

	                file.transferTo(new File(file1, newName));

	                String url = path+ "/" + newName;

	                System.out.println(url);

	            } catch (IOException e) {

	                e.printStackTrace();

	            }

	        }

	        //文件存储路径

	        return "success";

	    }

}

　　

使用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. 网络拓扑实例之交换机基于全局地址池作为DHCP服务器(七)

    组网图形 DHCP服务器简介 通常用户希望网络中的每台终端能够动态获取IP地址.DNS服务器的IP地址.路由信息.网关信息等网络参数,不需要手动配置终端的IP地址等网络参数:另外,针对一些移动终端(手 ...

  2. BootstrapBlazor 组件库介绍

    项目介绍 演示系统地址:https://www.blazor.zone Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架: 使用 C# 代替 JavaScript 来创建丰富 ...

  3. 团队作业第六次——Beta冲刺

    这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 这个作业要求在哪里 Beta 冲刺 这个作业的目标 团队进行Beta冲刺 作业正文 正文 其他参考文献 无 代码规范与计划 代码 ...

  4. python学习第五天 ----- 函数

    1. 内置函数 例如: print, round 2.自定义函数: 通过def来定义 def funcname(parameter_list): pass ⑴.参数parameter_list可以没有 ...

  5. MySQL ERROR 1040: Too many connections

    如题,本章主要讲下当服务器出现 ERROR 1040: Too many connections错误时的一些处理心得. max_connections查看 ## 查看最大连接数 SHOW VARIAB ...

  6. java ipv6发邮件需要注意的点

    和ipv4发邮件一样,毕竟ip只是用来找地址的,v4 v6使用上基本没区别. 但有一点得注意:java ipv6采用发送RST包来通知邮件服务器断开连接,这样会导致客户端抛 MessagingExce ...

  7. Python字符串学习相关问题

    Python中format_map与format字符串格式化的区别 Python中使用f字符串进行字符串格式化的方法 Python中使用百分号占位符的字符串格式化方法中%s和%r的输出内容有何不同? ...

  8. PyQt（Python+Qt）学习随笔：QListWidget的sortingEnabled属性

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 QListWidget的sortingEnabled属性用于控制列表部件中的项是否可以排序,如果为T ...

  9. 攻防世界 ctf web进阶区 unserialize

    进入到题目的界面,看到以下源码 构造payload=?code=O:4:"xctf":1:{s:4:"flag";s:3:"111";} 结 ...

  10. Emlog整站搬家教程

    之前使用的服务器空间到期,不想再续费,所以就打算更换服务器,购买新的服务器之后不知道怎么把EM程序转移到新的服务器上面,所以东查查西查查,终于找到了一个既简单又方便的搬家方法,分享给大家.步骤开始:1 ...