如何通过单个文件选择框同时实现图片与视频上传前预览

你只需要在现有代码基础上做少量调整即可，不需要拆分图片、视频的独立选择入口：

• 给文件输入框增加accept属性，限定可选文件为常见图片、视频格式，减少用户选错文件的概率
• 选中文件后先判断文件的MIME类型，区分是图片还是视频
• 根据文件类型切换对应预览元素的显示状态，给对应元素赋值预览地址，隐藏另一类预览元素

修改后的前端页面代码（makeapost.php） #

<input type="text" id="thetitle" name="title" placeholder="Title">
<input type="text" id="imagepath" name="imagepath" hidden>
<!-- 新增accept属性限定可选文件类型，绑定修改后的预览方法 -->
<input type="file" name="file" accept="image/*,video/*" onchange="handleFilePreview(this)">
<!-- 两个预览元素默认都隐藏，选中文件后再根据类型显示 -->
<img src="" id="img" style="display:none"> <br>
<video width="320" height="240" style="display:none" controls autoplay muted>
<source src="" id="forvideo">
</video>

注意：给video标签加了muted属性，避免自动播放被主流浏览器拦截

修改后的预览逻辑代码（main.js） #

function handleFilePreview(input) {
  if (!input.files || !input.files[0]) return;

  const selectedFile = input.files[0];
  const imgEl = document.querySelector("#img");
  const videoEl = document.querySelector("#forvideo").parentElement;
  const videoSourceEl = document.querySelector("#forvideo");
  // 生成本地预览地址，比FileReader读base64性能更好，尤其适合大体积视频
  const fileURL = URL.createObjectURL(selectedFile);

  // 重置两个预览元素的状态，清空上一次的预览内容
  imgEl.style.display = "none";
  videoEl.style.display = "none";
  imgEl.removeAttribute("src");
  videoSourceEl.removeAttribute("src");

  // 根据文件类型加载对应预览
  if (selectedFile.type.startsWith("image/")) {
    imgEl.src = fileURL;
    imgEl.style.display = "block";
  } else if (selectedFile.type.startsWith("video/")) {
    videoSourceEl.src = fileURL;
    videoEl.style.display = "block";
    videoEl.load();
  }
}

实现说明 #

• 用URL.createObjectURL()代替原有的FileReader方案，不需要把整个文件转成base64编码，大文件加载速度更快、内存占用更低
• 如果页面会频繁切换预览文件，可以在替换预览地址前调用URL.revokeObjectURL()释放之前生成的对象URL，避免内存泄漏
• 如果需要兼容极老版本浏览器，可以在MIME类型判断之外补充文件名后缀判断，避免个别环境下MIME类型读取异常

内容的提问来源于stack exchange，提问作者Hamodi coolguy