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. CentOS6.5配置KVM

    ///确认cpu是否支持kvm egrep '(vmx|svm)' --color=always /proc/cpuinfo ///安装包 yum -y install qemu-kvm libvir ...

  2. DRAM三种刷新方式（转载）

    设DRAM中电容的电荷每2ms就会丢失,所以2ms内必须对其补充.补充电荷是按行来进行的,为了[全部]内存都能保住电荷,必须对[所有]的行都得补充. 假设刷新1行的时间为0.5μs(刷新时间是等于存取 ...

  3. AndroidStudio新导入项目，无法编译，rebuild、clean都无效

    此按钮,可以用gradle重新编译

  4. MySQL重做日志（redo log）

    前面介绍了三种日志:error log.slow log.binlog,这三种都是 Server 层的.今天的 redo log 是 InnoDB引擎专有的日志文件. 为什么要有 redo log 用 ...

  5. NFS服务配置总结

    目录 介绍 原理 适用场景 安装 NFS服务端 NFS客户端 配置 服务端配置 客户端配置 介绍 NFS就是Network File System的缩写,它最大的功能就是可以通过网络,让不同的机器.不 ...

  6. 区块链知识博文1： 共识算法之争（PBFT，Raft，PoW，PoS，DPoS，Ripple）

    注:这是本人读到的关于共识算法最全和最好的分享博文,系统的介绍了拜占庭容错技术以及共识算法的原理和常用共识算法,原文链接请见后. 目录 一.拜占庭容错技术(Byzantine Fault Tolera ...

  7. PyQt（Python+Qt）学习随笔：信号签名（signature of the signal)是什么？

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 1.概念解释 函数签名:由函数的参数个数与其类型组成.函数在重载时,利用函数签名的不同即参数个数与类 ...

  8. Hive 安装 & Mysql 安装

    安装Hive && mysql (1)安装Hive Hive安装所需要的依赖(安装Hive前必须先安装jdk.hadoop) 1)jdk1.6以上 2)Hadoop要启动 未安装jdk ...

  9. js 彻底搞懂事件循环机制 Event Loop

    我们都知道javascript是单线程语言,就是因为单线程的特性,就不得不提js中的同步和异步 一.同步和异步 所谓单线程,无非就是同步队列和异步队列,js代码是自上向下执行的,在主线程中立即执行的就 ...

  10. nodjs html 转 pdf

    var fs = require('fs');var pdf = require('html-pdf');//模块//读取html 文件 var html = fs.readFileSync('./s ...