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

时间：2017-11-10 11:00:34 阅读：237 评论：0 收藏：0 [点我收藏+]

标签：文件 sync layer test art ping document out public

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实现文件上传，多文件上传，追加参数

标签：文件 sync layer test art ping document out public

原文地址：http://www.cnblogs.com/caifenglin/p/7813170.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行