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. 一枚程序猿的MacBook M1详细体验报告

    前言 2020年11月11日双十一上午,苹果发布了M1芯片的新款Mac,其最大的变化就是将处理器从Intel换成了苹果自研的ARM芯片M1. 上一次苹果更换Mac芯片要追溯到2006年,14年前,苹果 ...

  2. vue 项目在 IE11 里呈现空白，不兼容的问题解决方案

    我用vue 2.6.11版本编写的项目,在谷歌浏览器上运行的好好地,但是放到ie11浏览器上却是一片空白. 这个问题遇到的时候,我是蒙蔽了,抓紧去搜了搜百度,百度上的答案倒是都很统一. 都是说ie不兼 ...

  3. Pytest自动化测试 - allure报告进阶

    Allure除了具有Pytest基本状态外,其他几乎所有功能也都支持. 1.严重性 如果你想对测试用例进行严重等级划分,可以使用 @allure.severity 装饰器,它可以应用于函数,方法或整个 ...

  4. ModelSim入门

    verilog设计进阶 时间:2014年5月5日星期一 主要收获: 1. 安装了ModelSim ALTERA 6.4a; 2. 熟悉基本流程,仿真成功: 3. 了解testbench语法基本. 为什 ...

  5. Spring Boot 集成 MQTT

    本文代码有些许问题,处理方案见:解决 spring-integration-mqtt 频繁报 Lost connection 错误 一.添加配置 spring: mqtt: client: usern ...

  6. 什么是SSL双向认证，与单向认证证书有什么区别？

    SSL/TLS证书是用于用户浏览器和网站服务器之间的数据传输加密,实现互联网传输安全保护,大多数情况下指的是服务器证书.服务器证书是用于向浏览器客户端验证服务器,这种是属于单向认证的SSL证书.但是, ...

  7. cJSON的使用

    1 安装cJSON github地址:https://github.com/DaveGamble/cJSON.git 下载完成后进入cJSON目录,执行下面命令生成Makefile文件 mkdir b ...

  8. python核心高级学习总结3-------python实现进程的三种方式及其区别

    python实现进程的三种方式及其区别 在python中有三种方式用于实现进程 多进程中, 每个进程中所有数据( 包括全局变量) 都各有拥有⼀份, 互不影响 1.fork()方法 ret = os.f ...

  9. 第7.8节 Python中隐秘的类封装方法

    前面章节已经介绍了Python中的多态和继承,本节将介绍面向对象程序设计OOP三大特征的另一个特征--封装. 一.    概念 封装是将对象的状态信息(也就是数据.属性)隐藏在对象内部,将对象的属性和 ...

  10. 我摊牌了，大厂面试Linux就这5个问题

    说真的,这就是<我想进大厂>系列第八篇,但是Linux的问题确实很少,就这样,强行编几个没有营养的问题也没啥意义. 1.CPU负载和CPU利用率的区别是什么? 首先,我们可以通过uptim ...