js+java多文件上传和下载

最新推荐文章于 2023-06-02 15:18:00 发布

小疯子青

最新推荐文章于 2023-06-02 15:18:00 发布

阅读量358

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/a1773570500/article/details/119858555

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

页面显示如下：
在这里插入图片描述
前端上传下载代码：

<html>
<head>
    <title>Title</title>
    <meta charset="utf-8">
    <link href="/local/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="/local/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="/local/css/animate.min.css" rel="stylesheet">
    <link href="/local/css/style.min.css?v=4.0.0" rel="stylesheet"><base target="_blank">
</head>
<body>
<form encType="multipart/form-data" id="application_form">
    <input type="file" id="files" multiple onchange=""/><br/><br/>
    <input type="submit" id="fileSubmit" value="提交"/>
</form>

<div id='file-list-display'>
    <button  onclick="download()">下载</button>
</div>
</body>
<script src="/local/js/jquery.min.js?v=2.1.4"></script>
<script src="/local/js/bootstrap.min.js?v=3.3.5"></script>
<script src="/local/js/plugins/validate/jquery.validate.min.js"></script>
<script src="/local/js/plugins/validate/messages_zh.min.js"></script>
<script type="text/javascript">
    function download(){
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "/activity/download", true);
        xhr.responseType = "blob";
        xhr.setRequestHeader("token", window.localStorage.getItem("token"));
        xhr.onload = function () {
            if (this.status == 200) {
                var blob = this.response;
                var reader = new FileReader();
                reader.readAsDataURL(blob);
                reader.onload = function (e) {
                    var a = document.createElement('a');
                    a.download = "test.pdf";
                    a.href = e.target.result;
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                }
            }
        };
        xhr.send();
    }

    $(document).ready(function () {

        var fileList = [];
        var fileCatcher = document.getElementById('application_form');
        var files = document.getElementById("files"), renderFileList;

        fileCatcher.addEventListener("submit", function (event) {
            event.preventDefault();
            //上传文件
            sendFile();
        });

        files.addEventListener("change", function (event) {
            var flag=0;
            fileList.splice(0,fileList.length);
            for (var i = 0; i < files.files.length; i++) {
                var fileTemp=files.files[i];
                var fileTempName=fileTemp.name;
                var strtype=fileTempName.substring(fileTempName.length-3,fileTempName.length);
                strtype=strtype.toLowerCase();
                if(strtype=="jpg"||strtype=="rar"||
                    strtype=="zip"||strtype=="bmp"||strtype=="png"||
                    strtype=="doc"||strtype=="ppt"||strtype=="pdf")
                    {
                        fileList.push(files.files[i]);
                    }
                else{
                    alert("这种文件类型不允许上传！\r\n" +
                        "只允许上传这几种文件：rar、zip、jpg、bmp、png、doc、ppt、pdf" +
                        "\r\n请选择别的文件并重新上传。");
                    flag=1;
                    $("#files").before("<input type=\"file\" id=\"files\" multiple/>");
                    files.remove();
                    break;
                }
            }
        });

        sendFile = function () {
            var formData = new FormData();
            var request = new XMLHttpRequest();
            //循环添加到formData中
            fileList.forEach(function (file) {
                formData.append('files', file, file.name);
            })
            request.open("POST", "/activity/dome1");
            request.setRequestHeader("token", window.localStorage.getItem("token"));
            request.send(formData);
            console.log(formData)
        }
    })
</script>
</html>

后台上传和下载代码：

package com.ditanshishitong.controller.role;
import com.ditanshishitong.controller.BaseController;
import com.ditanshishitong.model.role.SysFile;
import com.ditanshishitong.utils.OperationFileUtils;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.*;
import java.net.URLEncoder;
import java.util.List;

@Controller
@RequestMapping(value = "/activity")
public class FileController extends BaseController {

    @Value("${file.path}")
    private String filePath;

    @RequestMapping(value = "/dome1", method = RequestMethod.POST)
    public void dome1(HttpServletRequest request, MultipartFile[] files){
        List<SysFile> sysFiles;
        if(files.length>0)
        {
            sysFiles=OperationFileUtils.uploadFile(files,filePath);
            sysFileService.insertFiles(sysFiles);
        }
    }

    @RequestMapping(value = "/download", method = RequestMethod.GET)
    public void download(HttpServletRequest request, HttpServletResponse response) throws IOException {
        String fileName="9979c2db-24df-4747-bdee-e0524664c30a_[哈佛家训大全集（上卷）].邓慧君.扫描版.pdf";
        File file=OperationFileUtils.getTmpFile(fileName,filePath);
        // 读到流中
        InputStream inStream = new FileInputStream(file);// 文件的存放路径
        // 设置输出的格式
        response.reset();
        response.addHeader("Content-Disposition", "attachment; filename=\"" + fileName + "\"");
        // 循环取出流中的数据
        byte[] b = new byte[1024];
        int len;
        try {
            while ((len = inStream.read(b)) > 0)
                response.getOutputStream().write(b, 0, len);
            inStream.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

package com.ditanshishitong.utils;

import com.ditanshishitong.model.role.SysFile;
import org.springframework.util.StringUtils;
import org.springframework.web.multipart.MultipartFile;

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

public class OperationFileUtils {

    //保存文件，将文件保存到服务器上
    public static List<SysFile> uploadFile(MultipartFile[] files, String filePath){
        List<SysFile> sysFiles=new ArrayList<>();
        for(MultipartFile file:files){
            String req= file.getOriginalFilename();
            if(StringUtils.isEmpty(req)){
                continue;
            }
            String tmpFileName = UUID.randomUUID()+"_"+req;
            File tempFile = OperationFileUtils.getTmpFile(tmpFileName,filePath);
            if(!tempFile.exists()){
                tempFile.getParentFile().mkdirs();
                try {
                    tempFile.createNewFile();
                    file.transferTo(tempFile); //到这里tempFile即是上传上来的文件。
                    SysFile sysFile=new SysFile(req,tmpFileName,file.getSize());
                    sysFiles.add(sysFile);
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
        return sysFiles;
    }

    //生成文件
    public static File getTmpFile(String fileName, String filePath) {
        File tmpDir = new File(filePath);
        return new File(tmpDir, fileName);
    }

}

小疯子青

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
js+java多文件上传和下载

页面显示如下：前端上传下载代码：<html><head> <title>Title</title> <meta charset="utf-8"> <link href="/local/css/bootstrap.min.css?v=3.3.5" rel="stylesheet"> <link href="/local/css/font-awesome.min.css?v=4.4.0" rel
复制链接

扫一扫