BootStrap多文件上传演示代码

最新推荐文章于 2023-10-14 21:06:21 发布

现在是秋冬季

最新推荐文章于 2023-10-14 21:06:21 发布

阅读量252

点赞数

分类专栏： Java小项目文章标签： java javascript jquery html bootstrap

本文链接：https://blog.csdn.net/qq_24023751/article/details/105705370

版权

Java小项目专栏收录该内容

3 篇文章 1 订阅

订阅专栏

地址：http://localhost:8080/File

package comn.duplicall.upload;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;



@SpringBootApplication
public class UploadApplication {

    public static void main(String[] args) {
        SpringApplication.run(UploadApplication.class,args);
    }

}

package comn.duplicall.upload.controller;

import comn.duplicall.upload.util.Result;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.PropertySource;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.FileOutputStream;
import java.io.InputStream;


@Controller
@Slf4j
public class UploadController {

    @Value("${filePath}")//配置文件中配置要上传文件保存的路径
    private String filePath;

    @RequestMapping(value = "File")
    public String toFile() {
        return "FileUpload";
    }


    @RequestMapping(value = "import", method = RequestMethod.POST)
    public ResponseEntity importFile(@RequestParam("fileUpload") MultipartFile[] fileUpload) {
        String[] str = new String[fileUpload.length];
        //服务器中文件不存在，就创建配置文件中的文件夹
        File[] files = new File(filePath).listFiles();
        if (files == null) {
            new File(filePath).mkdirs();
        }
        try {
            for (int i = 0; i < fileUpload.length; i++) {
                String fileName = fileUpload[i].getOriginalFilename();
                File file = new File(filePath, fileName);
                InputStream is = fileUpload[i].getInputStream();
                FileOutputStream fos = new FileOutputStream(file);
                byte[] bytes = new byte[1024];
                int length;
                while ((length = is.read(bytes)) != -1) {
                    fos.write(bytes, 0, length);
                }
                is.close();
                fos.close();
                str[i] = file.getAbsolutePath();
                log.info("upload {} success",fileName);
            }

        } catch (Exception e) {
            e.printStackTrace();
            return new ResponseEntity(e.getMessage(), HttpStatus.INTERNAL_SERVER_ERROR);
        }
        return new ResponseEntity(new Result(null, true), HttpStatus.OK);
    }

}

package comn.duplicall.upload.util;


public class Result<T> {
    //代码
    private int code;
    //提示信息
    private String message;
    //具体内容
    private T data;

    // 是否成功
    private boolean success;

    public int getCode() {
        return code;
    }

    public void setCode(int code) {
        this.code = code;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

    public T getData() {
        return data;
    }

    public void setData(T data) {
        this.data = data;
    }

    public boolean isSuccess() {
        return success;
    }

    public void setSuccess(boolean success) {
        this.success = success;
    }

    public Result(T data, boolean success) {
        this.data = data;
        this.success = success;
    }

    public Result() {
    }
}

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>FileUpload Test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <link th:href="@{/css/bootstrap.min.css}" href="../static/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link th:href="@{/css/fileinput/fileinput.min.css}" href="../static/css/fileinput/fileinput.min.css"
          rel="stylesheet" type="text/css">
    <link th:href="@{/css/font-awesome.css}" href="../static/css/font-awesome.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-8 col-md-offset-2" style="margin-top: 7%">
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <input id="fileUpload" name="fileUpload" multiple="multiple" class="file" type="file" data-preview-file-type="text">
                        <div id="tip-warn" class="alert alert-warning fade in" style="margin-top: 10px;display: none">

                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
<script th:src="@{/js/jquery.min.js}" src="../static/js/jquery.min.js"></script>
<script th:src="@{/js/bootstrap.min.js}" src="../static/js/bootstrap.min.js"></script>
<script th:src="@{/js/plugins/fileinput/fileinput.min.js}" src="../static/js/plugins/fileinput/fileinput.min.js"></script>
<script>
    $("#fileUpload").fileinput({
        uploadUrl: "import", //上传的地址
        allowedFileExtensions: ['xls', 'xlsx', 'txt', 'jpg']//接收的文件后缀
    }).on('filepreupload', function (event, data) {     //上传中
        console.log(data);
    }).on("fileuploaded", function (event, data) {    //一个文件上传成功
        console.log('文件上传成功！' + data.id);
    }).on('fileerror', function (event, data) {  //一个文件上传失败
        console.log('文件上传失败！' + data.id);
    });
</script>
</html>

源代码：

链接：https://pan.baidu.com/s/1P26YYi7Su65_3x87AHSlTQ
提取码：idxq
复制这段内容后打开百度网盘手机App，操作更方便哦