• 使用ajax请求上传多个或者多个附件


    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";
    	    }
    	 
    
    }
    

      

  • 相关阅读:
    [转] Web前端优化之 Server篇
    [转] Web前端优化之 内容篇
    [学习笔记] Web设计过程中该做和不该做的
    web前端性能优化
    jQuery代码片段
    socket.io
    ajax阻塞UI线程
    前端面试题整理
    nodejs之async异步编程
    jquery源码笔记
  • 原文地址:https://www.cnblogs.com/xianz666/p/13814892.html
Copyright © 2020-2023  润新知