ajax实现文件上传，多文件上传，追加参数

Posted 飘絮不飘

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax实现文件上传，多文件上传，追加参数相关的知识，希望对你有一定的参考价值。

1.html部分实现代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件上传</title>
</head>
<body>
<form id= "uploadForm">  
      <p >指定文件名： <input type="text" name="filename" value= ""/></p >  
      <p >上传文件： <input type="file" name="file1" id="file1"  multiple="multiple"  /></p> 
      <p >上传文件： <input type="file" name="file2" id="file2" /></p> 
      <p >上传文件： <input type="file" name="file3" id="file3" /></p>  
      <input type="button" value="上传" onclick="doUpload()" />  
</form>  
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="js/common.js"></script>    
<script type="text/javascript">
//获取token
var token = parent.window.document.getElementById("token").value;    
    
function doUpload() {  
    var formData = new FormData();
    formData.append("token", token);
    formData.append("file1", $(‘#file1‘)[0].files[0]);
    formData.append("file2", $(‘#file2‘)[0].files[0]);
    formData.append("file3", $(‘#file3‘)[0].files[0]);
    $.ajax({  
         url: ‘bookController/uploadMult‘ ,  
         type: ‘post‘,  
         data: formData,  
         cache: false,
         processData: false,
         contentType: false,
         async: false
    }).done(function(res) {
        
    }).fail(function(res) {
        
    });
}


</script>  
</body>
</html>

2.后台部分:

多文件上传方式处理:

    @RequestMapping(value = "/uploadMult", method = RequestMethod.POST)
    @ResponseBody
    public String uploadMult(HttpServletRequest request) {
         // 转型为MultipartHttpRequest：   
        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;   
        // 获得文件：   
        List<MultipartFile> files = multipartRequest.getFiles("file1");
        List<MultipartFile> files2 = multipartRequest.getFiles("file2");
        List<MultipartFile> files3 = multipartRequest.getFiles("file3");

        if (files.isEmpty()) {
            return "false";
        }

        String path = "F:/test";

        for (MultipartFile file : files) {
            String fileName = file.getOriginalFilename();
            int size = (int) file.getSize();
            System.out.println(fileName + "-->" + size);

            if (file.isEmpty()) {
                return "false";
            } else {
                File dest = new File(path + "/" + fileName);
                if (!dest.getParentFile().exists()) { // 判断文件父目录是否存在
                    dest.getParentFile().mkdir();
                }
                try {
                    file.transferTo(dest);
                } catch (Exception e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                    return "false";
                }
            }
        }
        return "true";
    }

单个文件上传方式处理:

    @RequestMapping(value = "/upload", method = RequestMethod.POST)
    @ResponseBody
    public String upload(@RequestParam("file") MultipartFile file, HttpServletRequest request) {
        String contentType = file.getContentType();
        String fileName = file.getOriginalFilename();
        /*
         * System.out.println("fileName-->" + fileName);
         * System.out.println("getContentType-->" + contentType);
         */
        String filePath = request.getSession().getServletContext().getRealPath("upload/");
        try {
            uploadFile(file.getBytes(), filePath, fileName);
        } catch (Exception e) {
            // TODO: handle exception
        }
        // 返回json
        System.out.println("上传成功!");
        return "true";
    }
    
    public static void uploadFile(byte[] file, String filePath, String fileName) throws Exception {
        File targetFile = new File(filePath);
        if (!targetFile.exists()) {
            targetFile.mkdirs();
        }
        FileOutputStream out = new FileOutputStream(filePath + fileName);
        out.write(file);
        out.flush();
        out.close();
    }

 

以上是关于ajax实现文件上传，多文件上传，追加参数的主要内容，如果未能解决你的问题，请参考以下文章

中止多文件上传 AJAX 请求

Ajax--FormData实现二进制文件上传

ajax利用FormData实现多文件上传php获取

AJAX多文件上传

ajax如何 实现 文件上传

ajax 利用formdata对象 实现多文件上传