ajax 单文件多文件上传

梦里梦外; 2022-03-17 19:28 249阅读 0赞

使用 ajax 上传文件，页面不刷新

本文后台使用 springboot 框架

### 后台上传接口 ###

package com.che.pri.controller;
    
    import java.io.File;
    import java.io.FileInputStream;
    import java.io.FileNotFoundException;
    import java.io.IOException;
    import java.io.InputStream;
    import java.io.OutputStream;
    import java.io.UnsupportedEncodingException;
    import java.util.HashMap;
    import java.util.Map;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import org.apache.commons.io.FileUtils;
    import org.apache.tomcat.util.http.fileupload.IOUtils;
    import org.springframework.http.HttpHeaders;
    import org.springframework.http.HttpRequest;
    import org.springframework.http.HttpStatus;
    import org.springframework.http.MediaType;
    import org.springframework.http.ResponseEntity;
    import org.springframework.web.bind.annotation.PathVariable;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;
    import org.springframework.web.multipart.MultipartFile;
    
    @RestController
    @RequestMapping("/file")
    public class FileUpdateController {
    	
    	/**
    	 * 多文件上传
    	 * @param request
    	 * @param files
    	 * @return
    	 */
    	@RequestMapping(value="/uploads")
    	public Object filesUpload(HttpServletRequest request, MultipartFile[] files) {
    		Map<String, String> res = new HashMap<String, String>();
    		
    		String str= request.getServletContext().getRealPath("/images/file/");
    		
    		for(int i=0; i<files.length; i++) {
    			System.out.println(files[i].getOriginalFilename());
    			
    			File newFile = new File(str, files[i].getOriginalFilename());
    			if(!newFile.getParentFile().exists()) {
    				newFile.getParentFile().mkdirs();
    			}
    			try {
    				files[i].transferTo(newFile);
    			} catch (IllegalStateException | IOException e) {
    				e.printStackTrace();
    			}
    		    //返回原文件名
    			res.put("" + i, files[i].getOriginalFilename());
    		}
    		return res;
    	}
    
    	/**
    	 * 单文件上传
    	 * @param request
    	 * @param file
    	 * @return
    	 */
    	@RequestMapping(value="/upload")
    	public String FileUpdate(HttpServletRequest request,MultipartFile file) {
    	   String str= request.getServletContext().getRealPath("/images/");
    	   
    	   String originalname=file.getOriginalFilename();
    	   System.out.println(originalname);
    	   System.out.println(str);
    	   File newFile=new File(str,originalname);
    	   
    	   if(!newFile.getParentFile().exists()) {
    		   newFile.getParentFile().mkdirs();
    	   }
    	   try {
    		file.transferTo(newFile);
    	} catch (IllegalStateException | IOException e) {
    	
    		e.printStackTrace();
    	}
    	   return originalname;
    	}
    	
    }

## ##

### 单文件上传 html  ###

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
        </head>
        <body>
            <form id="uploadForm" enctype="multipart/form-data">
                <input type="file" name="file"/>
            </form>
            <button id="uploadButton">上传文件</button>
            <script>
                $("#uploadButton").click(function(){
                    var formData = new FormData($("#uploadForm")[0]);
                    $.ajax({
                        type:"post",
                        url:"http://localhost:8089/file/upload",
                        async:true,
                        data:formData,
                        cache:false,
                        processData: false,
                        contentType: false,
                        success:function(res){
                            alert(res)
                        }
                    });
                });
            </script>
        </body>
    </html>

## ##

### 多文件上传 html ###

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
        </head>
        <body>
            <form id="uploadForm" enctype="multipart/form-data">
                <input type="file" name="files" multiple="multiple" />
            </form>
            <button id="uploadButton">上传文件</button>
            <script>
                $("#uploadButton").click(function(){
                    var formData = new FormData($("#uploadForm")[0]);
                    $.ajax({
                        type:"post",
                        url:"http://localhost:8089/file/uploads",
                        async:true,
                        data:formData,
                        cache:false,
                        processData: false,
                        contentType: false,
                        success:function(res){
                            alert(res)
                        }
                    });
                });
            </script>
        </body>
    </html>

仔细对比会发现 多文件上传比单文件上传多了 multiple="multiple" 属性