JS 根据File对象的type获取到文件类型

JavaScript本身并不直接提供从`File`对象的`type`属性获取文件类型的现成方法，因为`type`属性通常是浏览器内置的，并且可能会受到兼容性和安全性的限制。然而，你可以通过创建一个Blob对象，然后利用`Blob.prototype.type`属性来间接获取文件类型。例如：

function getFileType(file) {
    if (file.type) {
        return file.type;
    } else if (file.name && /\.(\w+)$/.test(file.name)) { // 使用文件名的扩展名作为类型
        return RegExp.$1;
    } else {
        return 'unknown'; // 或者返回默认类型
    }
}

const file = document.querySelector('input[type=file]').files[0];
const fileType = getFileType(file);
console.log(`File type: ${fileType}`);

在这个例子中，我们首先检查`file.type`是否存在，如果存在就直接返回；如果没有，我们就尝试从文件名的后缀部分推测类型。请注意，这种方式并不保证绝对准确，因为有些文件可能没有明确的扩展名，或者浏览器的`type`信息可能存在错误。

相关问题

js获取file对象读取文件内容

可以使用HTML5的File API来获取file对象并读取文件内容，具体步骤如下：

1. 获取input type=file元素

<input type="file" id="inputFile">

2. 使用JavaScript获取file对象

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

3. 使用FileReader读取文件内容

const reader = new FileReader();

reader.readAsText(file);

reader.onload = function() {
  const content = reader.result; // 文件内容
  console.log(content);
};

上面的代码将文本文件以字符串形式读取，如果需要以二进制形式读取，可以将 `readAsText` 改为 `readAsArrayBuffer`。

JavaScript input type=file 获取文件大小及类型限制

要获取文件大小，可以使用`File`对象的`size`属性。要获取文件类型，可以使用`File`对象的`type`属性。以下是一个示例代码：

var fileInput = document.getElementById('fileInput');

fileInput.addEventListener('change', function(e) {
  var file = e.target.files[0];
  var fileSize = file.size;
  var fileType = file.type;

  // 检查文件大小
  if (fileSize > 1024 * 1024) {
    alert("文件大小不能超过1MB");
    return;
  }

  // 检查文件类型
  if (fileType !== 'image/jpeg' && fileType !== 'image/png') {
    alert("只能上传JPEG或PNG格式的图片");
    return;
  }

  // 文件大小和类型都符合要求，可以继续操作
});

在上面的代码中，我们首先获取了一个`<input type="file">`元素，并在其`change`事件中获取了用户选择的文件。然后我们使用`File`对象的`size`和`type`属性来获取文件大小和类型。最后，我们检查文件大小和类型是否符合要求，并在不符合要求的情况下弹出相应的提示。