前端原生input file自定义样式 去除文件内容、并限制上传文件格式以及大小

要自定义前端原生 <input type="file"> 样式并实现文件内容的清除，以及限制上传文件的格式和大小，你可以使用以下方法：

1. 自定义样式：

使用 CSS 样式来美化 <input type="file"> 元素，通常通过隐藏默认样式，然后创建一个自定义的按钮或样式来替代。

HTML:

<div class="file-upload">
  <label for="file-input" class="custom-file-upload">
    Select File
  </label>
  <input id="file-input" type="file">
</div>
<button id="clear-button">Clear File</button>

CSS:

.file-upload {
  position: relative;
  display: inline-block;
}

.custom-file-upload {
  cursor: pointer;
  padding: 10px 20px;
  background-color: #e0e0e0;
  color: #333;
  border: 1px solid #ccc;
}

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

#clear-button {
  margin-top: 10px;
}

2. 清除文件内容：

为了清除文件内容，你可以通过监听 “Clear” 按钮的点击事件，然后将文件输入框的值设置为空。

JavaScript:

const clearButton = document.getElementById('clear-button');
const fileInput = document.getElementById('file-input');

clearButton.addEventListener('click', () => {
  fileInput.value = ''; // 清空文件输入框的值
});

3. 限制文件格式和大小：

使用 JavaScript，你可以在文件选择时验证文件的类型和大小，并根据需要给出错误提示或阻止上传。

JavaScript:

fileInput.addEventListener('change', () => {
  const file = fileInput.files[0];
  const allowedExtensions = ['.jpg', '.jpeg', '.png']; // 允许的文件扩展名
  const maxFileSize = 5 * 1024 * 1024; // 最大文件大小（以字节为单位）

  if (file) {
    const fileName = file.name;
    const fileSize = file.size;

    // 验证文件扩展名
    const fileExtension = fileName.substring(fileName.lastIndexOf('.')).toLowerCase();
    if (!allowedExtensions.includes(fileExtension)) {
      alert('Invalid file format. Please upload a JPG, JPEG, or PNG file.');
      fileInput.value = ''; // 清空文件输入框的值
      return;
    }

    // 验证文件大小
    if (fileSize > maxFileSize) {
      alert('File size exceeds the limit of 5MB.');
      fileInput.value = ''; // 清空文件输入框的值
      return;
    }

    // 文件验证通过，可以进行上传操作
    // ...
  }
});

这样，你就可以自定义 <input type="file"> 的样式，并实现清除文件内容的功能，同时限制上传文件的格式和大小。记得根据你的需求修改允许的文件扩展名和最大文件大小的值。