手把手教你实现文件上传下载，自定义input样式

2023-09-21 01:32:15

利用 HTML、JS、Bootstrap 和 SpringBoot 实现文件上传和下载

在 Web 开发中，文件上传和下载是必不可少的特性。本文将深入探究如何运用 HTML、JS、Bootstrap 和 SpringBoot 巧妙地实现这些功能，同时自定义输入样式。

创建自定义文件选择器

首先，让我们创建一个自定义的文件选择器，它可以通过 HTML 和 CSS 实现：

<input type="file" id="file-input" multiple>

#file-input {
  display: none;
}

这段代码创建了一个隐藏的文件选择器，允许用户选择多个文件。

使用 JS 监听文件选择事件

接下来，我们需要监听文件选择器上的变化，在用户选择文件后触发事件：

document.getElementById("file-input").addEventListener("change", function() {
  const files = this.files;

  // 处理选择的文件...
});

利用 Ajax 实现文件上传

现在，让我们使用 Ajax 实现文件上传，通过 XMLHttpRequest 对象发送文件：

const xhr = new XMLHttpRequest();
xhr.open("POST", "/upload");
xhr.setRequestHeader("Content-Type", "multipart/form-data");
xhr.send(files);

这段代码创建一个 XMLHttpRequest 对象，并将其发送到服务器上的 "/upload" 路径，由服务器端处理文件上传。

使用 Ajax 实现文件下载

类似地，我们可以通过 Ajax 实现文件下载：

const xhr = new XMLHttpRequest();
xhr.open("GET", "/download?file=" + fileId);
xhr.responseType = "blob";
xhr.send();

xhr.onload = function() {
  if (xhr.status === 200) {
    const blob = xhr.response;

    // 处理下载的文件...
  }
};

借助 Bootstrap 美化页面

最后，我们可以借助 Bootstrap 美化我们的文件上传和下载页面：

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <form id="file-upload-form">
        <div class="form-group">
          <label for="file-input">选择文件</label>
          <input type="file" id="file-input" multiple>
        </div>
        <button type="submit" class="btn btn-primary">上传</button>
      </form>
    </div>
    <div class="col-md-6">
      <ul id="file-list"></ul>
    </div>
  </div>
</div>

.container {
  padding: 30px;
}

.form-group {
  margin-bottom: 20px;
}

#file-input {
  display: none;
}

.btn-primary {
  background-color: #337ab7;
  border-color: #337ab7;
}

#file-list {
  list-style-type: none;
  padding: 0;
}

#file-list li {
  margin-bottom: 10px;
}