如何使用原生JavaScript从文件输入保存本地文件并在其他页面展示

一、将上传文件保存到本地 #

浏览器出于安全限制，不允许JS直接写入本地文件系统，只能通过触发用户主动下载的方式，让用户确认保存路径。具体实现步骤如下：

• 获取文件输入控件中的选中文件
• 基于文件创建Blob对象（File本身是Blob的子类，可直接使用）
• 生成临时下载URL，通过隐藏的<a>标签触发下载操作

<input type="file" id="fileInput" accept="image/*">
<button id="saveBtn">保存文件</button>

<script>
document.getElementById('saveBtn').addEventListener('click', () => {
  const fileInput = document.getElementById('fileInput');
  const file = fileInput.files[0];
  
  if (!file) {
    alert('请先选择文件');
    return;
  }

  const downloadUrl = URL.createObjectURL(file);
  const a = document.createElement('a');
  
  a.href = downloadUrl;
  a.download = file.name; // 设置默认保存文件名
  
  document.body.appendChild(a);
  a.click();
  
  // 清理临时资源
  document.body.removeChild(a);
  URL.revokeObjectURL(downloadUrl);
});
</script>

二、在另一页面通过img展示上传的图片 #

可借助客户端存储（如localStorage）在页面间共享图片数据，具体步骤：

1. 在上传页面将图片转换为DataURL，存入localStorage
2. 在展示页面读取localStorage中的DataURL，赋值给<img>的src属性

上传页面补充代码 #

document.getElementById('fileInput').addEventListener('change', (e) => {
  const file = e.target.files[0];
  
  if (!file || !file.type.startsWith('image/')) {
    alert('请选择有效的图片文件');
    return;
  }

  const reader = new FileReader();
  reader.onload = (event) => {
    // 将图片DataURL存入localStorage
    localStorage.setItem('uploadedImage', event.target.result);
  };
  reader.readAsDataURL(file);
});

展示页面代码 #

<img id="displayImage" alt="上传的图片">

<script>
const imageData = localStorage.getItem('uploadedImage');
const imgElement = document.getElementById('displayImage');

if (imageData) {
  imgElement.src = imageData;
} else {
  imgElement.alt = '暂无可展示的图片';
}
</script>

注意事项 #

• localStorage有大小限制（通常约5MB），大图片建议改用IndexedDB存储
• 两个页面需处于同一域名下，才能共享localStorage数据
• 无需保留数据时，可执行localStorage.removeItem('uploadedImage')清理

内容的提问来源于stack exchange，提问作者Rosa Parks