js判断文件类型大小并给出提示的实现方法

下面就是“js判断文件类型大小并给出提示的实现方法”的完整攻略：

思路概述

1. 获取文件类型
2. 获取文件大小
3. 判断文件类型和大小，给出提示信息

获取文件类型

文件类型可以通过文件后缀名来判断。可以通过以下方法获取文件后缀名：

// 传入文件名，返回文件后缀名
function getFileSuffix(fileName) {
  var index = fileName.lastIndexOf(".");
  return index != -1 ? fileName.substring(index + 1) : "";
}

例如，调用以上方法获取"example.pdf"文件的后缀名，应该写成：

var suffix = getFileSuffix("example.pdf"); // suffix的值为"pdf"

获取文件大小

获取文件大小可以用FileReader对象，通过它的readAsBinaryString(file)方法读取文件的二进制数据，再通过result.length获取文件大小。具体代码如下：

function getFileSize(file, callback) {
  var reader = new FileReader();
  reader.onload = function() {
    callback(reader.result.length);
  };
  reader.readAsBinaryString(file);
}

调用以上方法获取文件file的大小，应写成：

getFileSize(file, function(size) {
  console.log("文件大小：" + size + " bytes");
});

判断文件类型和大小，给出提示信息

有了文件类型和大小，就可以根据需要给出提示信息了。例如，要判断文件类型和大小是否符合要求，可以使用如下代码：

function checkFile(file) {
  var suffix = getFileSuffix(file.name);
  var size = file.size;
  if (suffix != "pdf") {
    alert("请选择PDF文件");
    return false;
  } else if (size > 1024 * 1024) {
    alert("文件大小不能超过1MB");
    return false;
  }
  return true;
}

示例一：

判断上传的文件是否是图片并且大小不超过1MB：

function checkFile(file) {
  var suffix = getFileSuffix(file.name);
  var size = file.size;
  if (suffix != "jpg" && suffix != "png" && suffix != "gif") {
    alert("请选择图片文件");
    return false;
  } else if (size > 1024 * 1024) {
    alert("文件大小不能超过1MB");
    return false;
  }
  return true;
}

示例二：

判断上传的文件是否是视频并且大小不超过10MB：

function checkFile(file) {
  var suffix = getFileSuffix(file.name);
  var size = file.size;
  if (suffix != "mp4" && suffix != "avi" && suffix != "mov") {
    alert("请选择视频文件");
    return false;
  } else if (size > 10 * 1024 * 1024) {
    alert("文件大小不能超过10MB");
    return false;
  }
  return true;
}

以上就是“js判断文件类型大小并给出提示的实现方法”的完整攻略。