自定义 input[type=file] 上传按钮样式的四种方案

2023-12-15 16:47:03

上传文件按钮是我们在开发中经常会遇到的一个元素，它可以让我们方便地将文件上传到服务器。但是，默认的上传按钮样式可能并不符合我们的设计要求，因此我们需要对上传按钮进行样式自定义。

下面，我将介绍四种自定义 input[type=file] 上传按钮样式的方案：

方案一：使用 CSS 样式

input[type=file] {
  /* 按钮样式 */
  background-color: #008CBA;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

方案二：使用 JavaScript

document.querySelector('input[type=file]').addEventListener('change', function() {
  // 获取上传的文件
  var file = this.files[0];

  // 创建一个新的 FormData 对象
  var formData = new FormData();

  // 将文件添加到 FormData 对象中
  formData.append('file', file);

  // 发送 FormData 对象到服务器
  var request = new XMLHttpRequest();
  request.open('POST', 'upload.php', true);
  request.send(formData);
});

方案三：使用 jQuery

$('input[type=file]').change(function() {
  // 获取上传的文件
  var file = this.files[0];

  // 创建一个新的 FormData 对象
  var formData = new FormData();

  // 将文件添加到 FormData 对象中
  formData.append('file', file);

  // 发送 FormData 对象到服务器
  $.ajax({
    url: 'upload.php',
    type: 'POST',
    data: formData,
    processData: false,
    contentType: false,
    success: function(data) {
      // 上传成功后处理数据
    }
  });
});