bootstrap fileinput实现文件上传功能

下面是我给出的详细解释和完整攻略：

Bootstrap Fileinput 实现文件上传功能

Bootstrap Fileinput是Bootstrap框架的扩展插件，用于实现更丰富的文件选择和上传功能。本文将介绍如何使用Bootstrap Fileinput实现文件上传功能。

安装 Bootstrap Fileinput

首先，需要下载Bootstrap Fileinput插件，并引入相关的CSS和JS文件。可以在Bootstrap Fileinput官方网站下载最新版本。

引入CSS和JS文件

在HTML文件包含以下样式和脚本文件CSS：

<!--bootstrap fileinput CSS-->
<link href="https://cdn.bootcss.com/bootstrap-fileinput/5.1.3/css/fileinput.min.css" rel="stylesheet">
<!--jQuery-->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<!--bootstrap JS-->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--bootstrap fileinput JS-->
<script src="https://cdn.bootcss.com/bootstrap-fileinput/5.1.3/js/fileinput.min.js"></script>

使用Bootstrap上传文件控件

接下来在Html文件添加上传文件控件的代码。

<input id="upload-file" name="upload-file" type="file"/>

简单明了的表单控件，不过无法和后端进行通信，所以接下来我们添加JavaScript脚本。

JavaScript 实现上传文件

在HTML文件尾部添加如下脚本：

$("#upload-file").fileinput({
    uploadUrl: "/file-upload", // your upload server url
    allowedFileExtensions: ['jpg', 'png', 'gif'], // only these file types can be uploaded
    overwriteInitial: false,
    maxFileSize: 1000,
    maxFilesNum: 10,
    //allowedFileTypes: ['image', 'video', 'flash'],
    slugCallback: function (filename) {
        return filename.replace('(', '_').replace(']', '_');
    }
});

这里我们使用了fileinput插件中的一些选项。其中，uploadUrl表示上传文件时提交到的URL地址，allowedFileExtensions表示只允许上传特定文件类型，overwriteInitial表示是否覆盖之前选择的文件，maxFileSize表示文件大小最大限制，maxFilesNum表示最大上传文件个数等。

当用户选择文件并点击上传按钮时，会向指定的服务器发送POST请求，并自动携带文件数据。服务器端就可以使用相应的框架（例如：SpringMVC）来处理上传的文件。

示例

下面是一个Spring Boot应用实现BootStrap Fileinput文件上传的示例。项目中使用Thymeleaf模板引擎生成前端页面，后端使用Spring Web MVC框架实现上传文件的处理。

添加依赖

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
    <scope>provided</scope>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

<!--用于处理文件上传的依赖-->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.6</version>
</dependency>
<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.3</version>
</dependency>

编写上传文件服务（Controller）

创建一个名为UploadController的文件，并添加@Controller和@ResponseBody注解，表示这个类用于处理文件的上传和删除。

@Controller
@ResponseBody
public class UploadController {
    //上传文件
    @RequestMapping(value = "/upload-file", method = RequestMethod.POST)
    public String uploadFile(@RequestParam("upload-file") MultipartFile file) throws IOException {
        String fileName = file.getOriginalFilename();
        String filePath = "C:/temp/";
        File destFile = new File(filePath + fileName);
        try {
            FileUtils.writeByteArrayToFile(destFile, file.getBytes());
        } catch (IOException e) {
            throw new IllegalStateException(e.getMessage());
        }
        return "success";
    }

    //删除文件
    @RequestMapping(value = "/delete-file", method = RequestMethod.POST)
    public String deleteFile(@RequestParam("file-name") String fileName) {
        String filePath = "C:/temp/";
        File targetFile = new File(filePath + fileName);
        if (targetFile.exists() && targetFile.isFile()) {
            targetFile.delete();
            return "success";
        } else {
            throw new IllegalStateException("删除失败！");
        }
    }
}

这段代码定义了两个方法，一个用于上传文件，一个用于删除文件。其中，uploadFile()方法首先获取上传文件的文件名和保存路径，然后将文件数据写入到指定的文件中。deleteFile()方法接收前端发送过来的文件名，并根据文件名删除指定的文件。

编写前端页面

在Spring Boot项目的src/main/resources/templates目录下创建index.html文件，用于测试BootStrap Fileinput文件上传功能。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>BootStrap Fileinput 文件上传</title>
    <!--bootstrap CSS-->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!--bootstrap Fileinput CSS-->
    <link href="https://cdn.bootcss.com/bootstrap-fileinput/5.1.3/css/fileinput.min.css" rel="stylesheet">
    <!--jQuery-->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <!--bootstrap JS-->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!--Bootstrap Fileinput JS-->
    <script src="https://cdn.bootcss.com/bootstrap-fileinput/5.1.3/js/fileinput.min.js"></script>
</head>
<body>
<div class="container">
    <h1>BootStrap Fileinput 文件上传</h1>

    <div class="row">
        <label for="upload-file">选择文件：必须是图片.</label>
        <input id="upload-file" name="upload-file" type="file"/>
    </div>
    <br>

    <div class="row">
        <button id="upload-btn" class="btn-primary">上传</button>
        <button id="cancel-btn" class="btn-danger">取消</button>
    </div>
</div>

<script>
    $(function () {
        $("#upload-file").fileinput({
            uploadUrl: "/upload-file",
            showUpload: false,
            showRemove: false,
            allowedFileExtensions: ['jpg', 'png', 'gif'],
            maxFileSize: 5000,
            minFileCount: 1,
            maxFileCount: 5,
            validateInitialCount: true,
            overwriteInitial: false,
            previewFileType: "image",
            initialPreviewAsData: true,
            initialPreviewFileType: 'image',
            removeLabel: "删除",
            uploadLabel: "上传",
            browseLabel: "选择图片",
            maxTotalFilesSize: 5000
        });

        $("#upload-btn").click(function () {
            $('#upload-file').fileinput('upload');
        });

        $("#cancel-btn").click(function () {
            $('#upload-file').fileinput('clear');
        });
    });
</script>
</body>
</html>

这段代码定义了一个文件上传控件和相应的按钮，用于上传文件，先选择文件，然后点击“上传”按钮即可上传文件。上传成功后会自动显示上传的文件信息，并查看删除文件的链接。

到这里，一个基于 BootStrap Fileinput 实现文件上传的示例就完成了。