JS实现表单多文件上传样式美化支持选中文件后删除相关项

JS实现表单多文件上传样式美化支持选中文件后删除相关项的完整攻略主要包括以下三个步骤：

HTML结构的搭建

在HTML结构中，我们需要使用文件输入框和上传按钮，同时利用CSS样式美化显示效果。具体HTML结构如下：

<div id="upload-area">
  <input type="file" id="upload" name="file" multiple="multiple" />
  <label for="upload">上传文件</label>
  <ul id="file-list"></ul>
</div>

在这个结构中，input标签的属性type为file，并设置了multiple属性，允许用户选择多个文件。label标签的for属性绑定了input标签的id，以实现对input标签的点击事件进行触发。而ul标签用来存储已选中的文件。

JS事件绑定

在JS中，我们需要对input标签和ul标签绑定相关事件，以实现文件选择、文件上传和删除等功能。具体代码如下：

// 获取input和ul标签
var upload = document.getElementById('upload');
var fileList = document.getElementById('file-list');

// 绑定input标签的change事件，实现选中文件添加到文件列表
upload.addEventListener('change', function () {
  // 获取已选中的文件列表
  var files = upload.files;
  for (var i = 0, len = files.length; i < len; i++) {
    var file = files[i];
    var li = document.createElement('li');
    li.innerHTML = file.name;
    // 添加删除按钮
    li.innerHTML += '<button class="delete-file">删除</button>';
    fileList.appendChild(li);
  }
});

// 绑定ul标签内部的点击事件，实现选中文件后的删除功能
fileList.addEventListener('click', function (event) {
  if (event.target.className === 'delete-file') {
    var li = event.target.parentNode;
    var ul = li.parentNode;
    ul.removeChild(li);
  }
});

// 绑定form表单的submit事件，实现文件上传到服务器
var form = document.getElementById('form');
form.addEventListener('submit', function (event) {
  event.preventDefault();
  // 构造FormData对象
  var formData = new FormData();
  var files = upload.files;
  for (var i = 0, len = files.length; i < len; i++) {
    var file = files[i];
    formData.append('file[]', file);
  }
  // 使用XMLHttpRequest对象上传文件
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload', true);
  xhr.send(formData);
});

在这个代码中，我们分别绑定了input标签的change事件、ul标签内部的点击事件和form表单的submit事件，从而实现了选中文件添加到文件列表、选中文件后的删除、以及文件上传到服务器的功能。

CSS样式的设置

最后，我们需要使用CSS样式来美化表单的显示效果和文件列表中上传的文件的显示效果。具体代码如下：

/* 隐藏原生的文件输入框 */
#upload {
  display: none;
}

/* 上传按钮的样式 */
label[for="upload"] {
  display: inline-block;
  margin: 10px 0;
  padding: 10px 20px;
  font-size: 16px;
  color: #fff;
  background-color: #3498db;
  border-radius: 4px;
  cursor: pointer;
}

/* 已选择的文件列表的样式 */
#file-list {
  margin-top: 20px;
  padding: 0;
  list-style: none;
}

#file-list li {
  display: block;
  margin: 5px 0;
  padding: 5px;
  font-size: 14px;
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

#file-list li button {
  margin-left: 10px;
  padding: 3px 5px;
  font-size: 12px;
  color: #fff;
  background-color: #e74c3c;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#file-list li button:hover {
  background-color: #c0392b;
}

在这个代码中，我们主要设置了上传按钮的样式、已选择的文件列表的样式以及删除按钮的样式。

以上就是JS实现表单多文件上传样式美化支持选中文件后删除相关项的完整攻略。接下来，我们来看两个具体的实例说明。

示例1：表单多文件上传

<form id="form" action="/upload" method="post" enctype="multipart/form-data">
  <div id="upload-area">
    <input type="file" id="upload" name="file" multiple="multiple" />
    <label for="upload">上传文件</label>
    <ul id="file-list"></ul>
  </div>
  <button type="submit">提交</button>
</form>

在这个表单中，我们使用了以上三个步骤中的HTML结构、JS事件绑定和CSS样式设置，从而实现了表单的多文件上传功能，并且利用CSS样式美化显示效果。

示例2：文件管理页面

<div id="upload-area">
  <input type="file" id="upload" name="file" multiple="multiple" />
  <label for="upload">上传文件</label>
  <ul id="file-list"></ul>
</div>

<script>
// 动态获取已上传的文件列表
var fileList = document.getElementById('file-list');
fetch('/files')
  .then(response => response.json())
  .then(files => {
    files.forEach(file => {
      var li = document.createElement('li');
      li.innerHTML = file.name + ' (' + formatSize(file.size) + ')';
      // 添加删除按钮
      li.innerHTML += '<button class="delete-file">删除</button>';
      fileList.appendChild(li);
    }); 
  })

// 工具函数：格式化文件大小
function formatSize(size) {
  if (size < 1024) {
    return size + 'B';
  } else if (size < (1024 * 1024)) {
    return (size / 1024).toFixed(2) + 'KB';
  } else if (size < (1024 * 1024 * 1024)) {
    return (size / (1024 * 1024)).toFixed(2) + 'MB';
  } else {
    return (size / (1024 * 1024 * 1024)).toFixed(2) + 'GB';
  }
}

// 绑定ul标签内部的点击事件，实现选中文件后的删除功能
fileList.addEventListener('click', function (event) {
  if (event.target.className === 'delete-file') {
    var li = event.target.parentNode;
    var ul = li.parentNode;
    ul.removeChild(li);
    // 向服务器发送删除请求
    var fileName = li.innerHTML.split(' ')[0];
    fetch('/delete', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        fileName: fileName
      })
    })
  }
});

// 绑定form表单的submit事件，实现文件上传到服务器
var form = document.getElementById('form');
form.addEventListener('submit', function (event) {
  event.preventDefault();
  // 构造FormData对象
  var formData = new FormData();
  var files = upload.files;
  for (var i = 0, len = files.length; i < len; i++) {
    var file = files[i];
    formData.append('file[]', file);
  }
  // 使用XMLHttpRequest对象上传文件
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload', true);
  xhr.send(formData);
});
</script>

在这个页面中，我们同样使用了以上三个步骤中的HTML结构、JS事件绑定和CSS样式设置，从而实现了文件管理页面。并且利用了fetch API向服务器发送GET请求获取已上传的文件列表，并向服务器发送POST请求实现文件的上传和删除。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS实现表单多文件上传样式美化支持选中文件后删除相关项 - Python技术站