ajax_用ajax实现多文件上传

最新推荐文章于 2024-07-15 15:38:12 发布

Toro_Toro

最新推荐文章于 2024-07-15 15:38:12 发布

阅读量6.7k

点赞数 2

分类专栏： js 文章标签： ajax 多文件上传

本文链接：https://blog.csdn.net/qq_35556474/article/details/54575779

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

jsp代码块

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="./jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="./upload.js" type="text/javascript"></script>
</head>
<body>
    <!-- <form id="uploadForm" action="http://localhost:8080/upload/upload/upload.action" method="post" enctype="multipart/form-data"> -->
    <form id="uploadForm" >
        <input type="file" name="img" />
        <input type="button" value="上传" onclick="doUpload()"> 
        <!-- <button type="submit">提交</button> -->
    </form>
</body>
<script type="text/javascript">

</script>
</html>

js代码

function doUpload(){
        var formData = new FormData($("#uploadForm")[0]);
        $.ajax({  
            url : "http://localhost:8080/upload/upload/upload.action",  
            type: 'POST',  
            data: formData,  
            async: false,  
            cache: false,  
            contentType: false,  
            processData: false, 
            success : function(data) {  
                alert("成功了！");
            },  
            error : function(data) {  
                alert("失败了！");
            }
        }); 
    }

.action 后台代码

package com.mashen.upload;

import java.io.File;
import java.io.IOException;
import java.util.UUID;

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;

@Controller
@RequestMapping("/upload")
public class Upload {

    @RequestMapping("/upload")
    @ResponseBody
    public void upload(@RequestParam(value="img")MultipartFile img){
        System.out.println("找到我了！！！");
        //获取文件名
        String fileName = img.getOriginalFilename();
        //生成存储名
        String saveName = UUID.randomUUID().toString() + fileName.substring(fileName.lastIndexOf("."));
        //定义存储路径
        File file = new File("E:/test/",saveName);
        try { 
            //存储文件
            img.transferTo(file);
        } catch (IllegalStateException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

基于H5的多文件上传
jsp部分

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="./jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="./upload.js" type="text/javascript"></script>
</head>
<body>
    <!-- <form id="uploadForm" action="http://localhost:8080/upload/upload/upload.action" method="post" enctype="multipart/form-data"> --> 
    <form id="uploadForm" >
        <input type="file" name="img" multiple="multiple"/>
        <input type="button" value="上传" onclick="doUpload()">
        <!-- <button type="submit">提交</button> -->
    </form>
</body>
<script type="text/javascript">

</script>
</html>

.action部分

package com.mashen.upload;

import java.io.File;
import java.io.IOException;
import java.util.Collection;
import java.util.List;
import java.util.Map;
import java.util.UUID;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.Part;

import org.springframework.http.HttpRequest;
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;

@Controller
@RequestMapping("/upload")
public class Upload {

    @RequestMapping("/upload")
    @ResponseBody
    public void upload(@RequestParam(value = "img") List<MultipartFile> list) {
        System.out.println("找到我了！！！");
        try {
            for (MultipartFile file : list) {
                String fileName = file.getOriginalFilename();
                String saveName = UUID.randomUUID().toString() + fileName.substring(fileName.lastIndexOf("."));
                File file1 = new File("E:/test/", saveName);
                file.transferTo(file1);
            }
        } catch (IllegalStateException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }


//使用springMVC多文件上传通用写法
@RequestMapping("/upload2")
    @ResponseBody
    public void upload2(HttpServletRequest request , HttpServletResponse response){
        //创建一个通用的多部分解析器  
        CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());
        //判断 request 是否有文件上传,即多部分请求(即检查form中是否有enctype="multipart/form-data")
        if(multipartResolver.isMultipart(request)){
            //转换成多部分request
            MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
            //取得request中的所有input的name 
            Iterator<String> iter = multiRequest.getFileNames();
            while(iter.hasNext()){
                //取得一个input里面所有的上传文件  
                List<MultipartFile> list = multiRequest.getFiles(iter.next());
                for(MultipartFile file : list){
                    if(file != null){
                        //取得当前上传文件的文件名称 
                        String myFileName = file.getOriginalFilename();
                        //如果名称不为“”,说明该文件存在，否则说明该文件不存在  
                        if(myFileName.trim() != null){
                            //重命名上传后的文件名  
                            String saveName = UUID.randomUUID().toString() + myFileName.substring(myFileName.lastIndexOf("."));
                            //定义上传路径  
                            File localFile = new File("E:/test/",saveName);
                            try {
                                //保存
                                file.transferTo(localFile);
                            } catch (IllegalStateException e) {
                                e.printStackTrace();
                            } catch (IOException e) {
                                e.printStackTrace();
                            }
                        }
                    }
                }

            }
        }
    }
}