客户端js判断文件类型和文件大小即限制上传大小

客户端JS判断文件类型和文件大小即限制上传大小是常见的一个需求。以下是操作的完整攻略：

1.判断文件类型

• 第一种方法：使用HTML5的file API

使用HTML5的file API可以获取文件的信息，包括文件类型，如下：

const fileInput = document.getElementById('file');
const file = fileInput.files[0];

if (file.type === 'image/png' || file.type === 'image/jpeg') {
  // 文件类型为png或jpeg
} else {
  // 文件类型不符合要求
}

• 第二种方法：使用正则表达式

使用正则表达式判断文件扩展名是否符合要求，如下：

const fileInput = document.getElementById('file');
const fileName = fileInput.value;
const regex = /^.*(\.png|\.jpg|\.jpeg)$/;

if (regex.test(fileName.toLowerCase())) {
  // 文件类型为png,jpg或jpeg
} else {
  // 文件类型不符合要求
}

2.限制上传文件大小

• 第一种方法：使用HTML5的file API

使用HTML5的file API可以获取文件的大小，如下：

const fileInput = document.getElementById('file');
const file = fileInput.files[0];

const fileSize = file.size / 1024 / 1024; // 获取文件大小，单位为MB

if (fileSize > 5) { // 文件大小限制为5MB
  // 文件大小超过限制
} else {
  // 文件大小符合要求
}

• 第二种方法：使用onchange事件结合FormData

使用onchange事件结合FormData可以获取文件的大小，如下：

const fileInput = document.getElementById('file');
let formData = null;

fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  formData = new FormData();

  formData.append('file', file);

  if (file.size / 1024 / 1024 > 5) { // 文件大小限制为5MB
    // 文件大小超过限制
  } else {
    // 文件大小符合要求
  }
});

以上是客户端JS判断文件类型和文件大小即限制上传大小的完整攻略，希望对您有所帮助。