如何判断file input的文件来自存储还是相机？

程序笔记 2024年08月31日09:33

在前端中，可以使用 JavaScript 来判断 file input 的文件是来自存储还是相机。可以通过判断文件的元数据信息以及文件的 lastModified 属性值来判断文件的来源。

以下是一个示例代码，演示如何使用 JavaScript 判断 file input 的文件来自存储还是相机：

<!DOCTYPE html>
<html>
<head>
  <title>判断文件来源示例</title>
  <script>
    function handleFileSelect(evt) {
      var file = evt.target.files[0];
      var isFromCamera = false;
      var isFromStorage = false;
      
      // 判断文件的元数据信息
      if (file.type.indexOf('image/') === 0) {
        var img = new Image();
        img.onload = function() {
          isFromCamera = img.width > 0 && img.height > 0;
          isFromStorage = !isFromCamera && file.lastModified;
          console.log('文件来源：' + (isFromCamera ? '相机' : '存储设备'));
        };
        img.src = URL.createObjectURL(file);
      }
      else {
        isFromStorage = file.lastModified;
        console.log('文件来源：存储设备');
      }
    }

    document.getElementById('file-input').addEventListener('change', handleFileSelect, false);
  </script>
</head>
<body>
  <input type="file" id="file-input" accept="image/*">
</body>
</html>

另外，从相机中获取的文件通常会包含一些特殊的元数据信息，比如 EXIF 数据，可以通过 JavaScript 库来解析这些信息，从而判断文件的来源。可以使用 exif-js 或 piexif.js 等库来解析这些元数据。

以下是一个示例代码，演示如何使用 lastModified 属性和 exif-js 库来判断文件的来源：

<!DOCTYPE html>
<html>
<head>
  <title>判断文件来源示例</title>
  <script src="https://cdn.jsdelivr.net/npm/exif-js"></script>
  <script>
    function handleFileSelect(evt) {
      var file = evt.target.files[0];
      var reader = new FileReader();
      reader.onload = function(e) {
        var exifData = EXIF.readFromBinaryFile(new BinaryFile(e.target.result));
        var isFromCamera = exifData && exifData.Make && exifData.Model;
        var isFromStorage = !isFromCamera && file.lastModified;
        console.log('文件来源：' + (isFromCamera ? '相机' : '存储设备'));
      };
      reader.readAsBinaryString(file);
    }

    document.getElementById('file-input').addEventListener('change', handleFileSelect, false);
  </script>
</head>
<body>
  <input type="file" id="file-input" accept="image/*">
</body>
</html>

这个示例代码中，我们使用了 exif-js 库来读取文件的元数据信息，判断文件是否来自相机。如果文件包含 Make 和 Model 字段，说明该文件来自相机，否则认为它来自存储设备。如果文件没有元数据信息，我们则使用 lastModified 属性来判断文件是否来自存储设备。

如果有更好的办法欢迎留言分享。