js自定义input文件上传样式

下面是JS自定义input文件上传样式的完整攻略。我们可以通过JS代码来自定义input文件上传样式，从而提升用户体验。

创建文件上传按钮

我们可以通过HTML代码来创建文件上传按钮，如下所示：

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

隐藏默认文件上传按钮

当我们创建了文件上传按钮后，默认的文件上传按钮会遮盖在上面，需要将其隐藏。可以通过以下CSS代码来实现：

#upload-file {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

创建自定义样式的上传按钮

我们可以创建一个自定义样式的上传按钮，并将其与input按钮关联起来。示例如下：

<label for="upload-file" class="custom-upload-btn">选择文件</label>
<input type="file" id="upload-file" class="hidden">

其中，label标签用于创建自定义样式的上传按钮，for属性指向对应的input按钮。同时要为input按钮添加class="hidden"，将其隐藏。

绑定上传事件

当用户点击上传按钮并选择文件后，我们需要获取文件，并执行上传操作。可以通过以下JS代码实现：

const uploadFileBtn = document.getElementById('upload-file');
uploadFileBtn.addEventListener('change', function() {
  const fileList = this.files;
  // 获取文件，并执行上传操作
});

其中，change事件会在文件上传按钮的内容发生改变时触发，this.files属性可以获取到已选择的文件列表。

实现自定义上传进度条

我们可以通过使用HTML5的xhr对象或fetch函数来实现文件上传，并使用JS和CSS实现自定义的上传进度条。具体实现方式可以参考以下两个示例：

示例一：使用xhr对象

const xhr = new XMLHttpRequest();
const formData = new FormData();
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');

for (const file of fileList) {
  formData.append('files', file);
}

xhr.open('POST', '/upload');
xhr.upload.addEventListener('progress', function(event) {
  if (event.lengthComputable) {
    const percentComplete = (event.loaded / event.total) * 100;
    progressBar.style.width = percentComplete + '%';
    progressText.innerHTML = percentComplete.toFixed(2) + '%';
  }
});

xhr.send(formData);

其中，xhr对象用于发送POST请求，formData对象用于将文件数据添加到请求体中。xhr.upload对象可以监听上传进度，根据上传进度动态更新进度条和上传进度文本。

示例二：使用fetch函数

const formData = new FormData();
const progressBar = document.getElementById('progress-bar');
const progressText = document.getElementById('progress-text');

for (const file of fileList) {
  formData.append('files', file);
}

fetch('/upload', {
  method: 'POST',
  body: formData,
}).then(res => {
  res.body.getReader().read().then(() => {
    progressBar.style.width = '100%';
    progressText.innerHTML = '100%';
  });
}).catch(err => {
  console.log(err);
});

其中，fetch函数用于异步发送POST请求，将formData对象作为请求体参数。fetch函数返回的是一个Promise对象，可以监听请求返回的响应结果，在请求成功后更新进度条和进度文本。

总结

通过以上步骤，我们就可以实现JS自定义input文件上传样式和进度条了。希望这篇攻略可以帮助到你！