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. Day 1-决胜IT十八招-前言

    走资讯这一行转眼间八年多了,从大学的时候,我有长达十年的时间思索在从事软体开發这一行到底怎麽存活下来,这思考下来,为自己总算找到一个出口来,这十八招只是其一的绝学,见阵这一行干软体开發的变化也很大,从 ...

  2. 网络基础：ip地址

    原文链接:http://blog.51cto.com/xiexiaojun/1882088 很棒的总结,概念+例题很清晰

  3. select标签

    select标签 select 可以创建单选或多选菜单. <!DOCTYPE html> <html> <head> <meta charset=" ...

  4. CPU实现原子操作的原理

    586之前的CPU, 会通过LOCK锁总线的形式来实现原子操作. 686开始则提供了存储一致性(Cache coherence),  这是多处理的基础, 也是原子操作的基础. 1. 存储的粒度 存储的 ...

  5. 第9.10节 Python中IO模块其他文件操作属性和方法简介

    本文中所有案例中的fp都是使用open函数打开文件返回的一个文件对象,为了节省篇幅,大部分没有提供文件打开的代码. 一. 文件是否关闭的属性 属性名:closed 功用:判断文件是否关闭 示例: &g ...

  6. PyQt(Python+Qt)学习随笔：QAbstractScrollArea的用途

    老猿Python博文目录 老猿Python博客地址 QAbstractScrollArea部件提供了一个带有按需滚动条的滚动区域. QAbstractScrollArea是滚动区域的低级抽象.该区域提 ...

  7. PyQt(Python+Qt)学习随笔：Designer中ItemViews类部件frameShape属性

    老猿Python博文目录 老猿Python博客地址 frameShape属性是从QFrame继承的属性,对应类型为QFrame.Shape,该属性表示框架样式中的框架形状,有如下取值: 老猿Pytho ...

  8. KafKa简介和利用docker配置kafka集群及开发环境

    KafKa的基本认识,写的很好的一篇博客:https://www.cnblogs.com/sujing/p/10960832.html 问题:1.kafka是什么?Kafka是一种高吞吐量的分布式发布 ...

  9. SQL Server 批量插入数据方案 SqlBulkCopy 的简单封装，让批量插入更方便

    一.Sql Server插入方案介绍 关于 SqlServer 批量插入的方式,有三种比较常用的插入方式,Insert.BatchInsert.SqlBulkCopy,下面我们对比以下三种方案的速度 ...

  10. I am George1123!

    我是 George1123,一名来自浙江省,杭州市的初三爆菜 \(\tt oier\) . 以下是蒟蒻逊逊的 OJ 账号: 洛谷 loj uoj bzoj spoj 彩蛋:Welcome to my ...