Safari上传.heif文件时change事件未触发问题求助

问题描述 #

开发网站图片上传功能时，遇到以下问题：选择iOS模拟器默认图库中的HEIF格式图片时，<input type="file">的change事件完全不触发。原本以为设置accept="image/*"后系统会自动将HEIF转成JPG格式，但实际没有任何反应。

复现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File Upload Test</title>
</head>
<body>
<h1>File Upload Test</h1>
<input type="file" id="fileInput" multiple accept="image/*">
<script>
  function onUploadFunction() {
    alert('File(s) selected.');
  }

  const fileInput = document.getElementById('fileInput');
  fileInput.addEventListener('change', onUploadFunction);
</script>
</body>
</html>

解决方案 #

1. 显式声明支持HEIF格式 #

iOS Safari对accept="image/*"的处理存在特殊逻辑，当选择HEIF图片时，系统会尝试后台转码，但这个过程可能导致change事件丢失。显式添加HEIF的扩展名可以避免这个问题：
将input的accept属性修改为：

<input type="file" id="fileInput" multiple accept="image/*,.heic,.heif">

2. 手动处理图片转码（如需JPG格式） #

浏览器不会自动帮你转码图片，iOS的自动转码是系统层面的非标准行为，不可靠。如果需要将HEIF转成JPG，可通过FileReader结合Canvas实现：

function convertHeifToJpg(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = function(e) {
      const img = new Image();
      img.onload = function() {
        const canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0);
        // 将Canvas导出为JPG Blob
        canvas.toBlob(function(blob) {
          // 创建新的File对象，保留原文件名（替换扩展名）
          const jpgFile = new File([blob], file.name.replace(/\.(heic|heif)$/i, '.jpg'), { type: 'image/jpeg' });
          resolve(jpgFile);
        }, 'image/jpeg', 0.9);
      };
      img.onerror = reject;
      img.src = e.target.result;
    };
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}

// 修改上传处理函数
async function onUploadFunction(e) {
  const files = Array.from(e.target.files);
  const convertedFiles = await Promise.all(
    files.map(file => {
      if (/\.heic|\.heif$/i.test(file.name)) {
        return convertHeifToJpg(file);
      }
      return file;
    })
  );
  // 后续处理convertedFiles，比如上传
  alert(`已处理${convertedFiles.length}个文件`);
  // 重置input，避免重复选同文件不触发change
  e.target.value = '';
}

3. 重置File Input #

每次选择文件后重置input的value，确保重复选择相同文件时change事件仍能触发，这是File Input的通用坑，在iOS环境下更突出。

修改后的完整示例 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File Upload Test</title>
</head>
<body>
<h1>File Upload Test</h1>
<input type="file" id="fileInput" multiple accept="image/*,.heic,.heif">
<script>
  function convertHeifToJpg(file) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = function(e) {
        const img = new Image();
        img.onload = function() {
          const canvas = document.createElement('canvas');
          canvas.width = img.width;
          canvas.height = img.height;
          const ctx = canvas.getContext('2d');
          ctx.drawImage(img, 0, 0);
          canvas.toBlob(function(blob) {
            const jpgFile = new File([blob], file.name.replace(/\.(heic|heif)$/i, '.jpg'), { type: 'image/jpeg' });
            resolve(jpgFile);
          }, 'image/jpeg', 0.9);
        };
        img.onerror = reject;
        img.src = e.target.result;
      };
      reader.onerror = reject;
      reader.readAsDataURL(file);
    });
  }

  async function onUploadFunction(e) {
    const files = Array.from(e.target.files);
    const convertedFiles = await Promise.all(
      files.map(file => {
        if (/\.heic|\.heif$/i.test(file.name)) {
          return convertHeifToJpg(file);
        }
        return file;
      })
    );
    alert(`已处理${convertedFiles.length}个文件`);
    e.target.value = '';
  }

  const fileInput = document.getElementById('fileInput');
  fileInput.addEventListener('change', onUploadFunction);
</script>
</body>
</html>

内容的提问来源于stack exchange，提问作者E.ws