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. [Docker]Docker与Linux ip_forward数据包转发

    背景 今天在一台新虚拟机上需要临时启动一个consul服务,安装Docker后使用docker启动,但是在执行启动命令后发现docker有一个警告: WARNING: IPv4 forwarding ...

  2. Django匆匆一眼却解答了多年疑惑

    Django 是 Python 的 一款 Web 开发框架,另外还有 Tornado,Flask,Twisted.为什么我要选择学 Django?原因很简单,上家公司来了个网易的测开,就是用 Djan ...

  3. 【NOIP2017提高A组模拟9.17】信仰是为了虚无之人

    [NOIP2017提高A组模拟9.17]信仰是为了虚无之人 Description Input Output Sample Input 3 3 0 1 1 7 1 1 6 1 3 2 Sample O ...

  4. [BJDCTF 2nd]Schrödinger && [BJDCTF2020]ZJCTF，不过如此

    [BJDCTF 2nd]Schrödinger 点进题目之后是一堆英文,英语不好就不配打CTF了吗(流泪) 复制这一堆英文去谷歌翻译的时候发现隐藏文字 移除test.php文件,访问test.php ...

  5. vue结合element-ui实现二级复选框checkbox

    vue结合element-ui实现二级复选框checkbox 话不多说先上效果 交互:1.点击按钮全选,所有的checkbox全部选中:点击清空,所有的checkbox框都不选:点击确定获取选中的ch ...

  6. 最简单的Go Dockerfile编写姿势，没有之一！

    1. Dockerfile一些额外注意点 选择最简单的镜像 比如alpine,整个镜像5M左右 设置镜像时区 RUN apk add --no-cache tzdata ENV TZ Asia/Sha ...

  7. 题解 CF830D Singer House

    \(\texttt{Solution}\) 首先考虑 \(\texttt{dp}\) 维护题目要求的深度为 \(i\), 每个节点最多经过一次的不同有向路径数量 \(f_i\). 明显的,只维护这个东 ...

  8. MySQL技术内幕InnoDB存储引擎（三）——文件相关

    构成MySQL数据库和InnoDB存储引擎表的文件类型有: 参数文件:MySQL实例运行时需要的参数就是存储在这里. 日志文件:用来记录MySQL实例对某种条件做出响应时写入的文件. socket文件 ...

  9. Java并发编程的艺术（四）——JMM、重排序、happens-before

    什么是JMM JMM就是Java内存模型.目的是为了屏蔽系统和硬件的差异,让同一代码在不同平台下能够达到相同的访问结果.规定了线程和内存之间的关系. 内存划分 JMM规定了内存主要划分为主内存和工作内 ...

  10. Android开源项目分类汇总-转载

    太长了,还是转载吧...今天在看博客的时候,无意中发现了@Trinea在GitHub上的一个项目Android开源项目分类汇总,由于类容太多了,我没有一个个完整地看完,但是里面介绍的开源项目都非常有参 ...