如何通过HTML/JavaScript/jQuery在页面间传递图片文件？

哎，我完全懂你现在的困扰——试了好几种纯HTML/JS/jQuery的方法，都没法在页面之间传递上传的图片对吧？先给你明确结论：纯前端是可以实现临时的图片传递的，但你当前的代码逻辑有核心问题，咱们一步步捋清楚。

先说说你现有代码的问题 #

1. 表单提交方式错误：你用了method="get"提交表单，GET请求会把参数拼在URL里，但文件是二进制数据，根本没办法通过URL参数传递——这是最关键的错误，所以接收页面根本拿不到图片数据。
2. 接收页面逻辑混乱：你在window.onload里解析URL参数，但参数里本来就没有文件数据；而且img_load函数又绑定了新的文件选择事件，完全和之前上传的图片没关联。

纯前端可行的实现方案（适合临时传递） #

方案1：用localStorage（同域页面适用） #

原理是把上传的图片转成DataURL格式，存在浏览器的localStorage里，然后在目标页面读取并显示。

上传页面修改：

先去掉表单的action和method，然后添加JS监听：

<form name="formSale">
  <div class="form-group upload third file-wrapper">
    <label for="uploadDress">Upload image:</label>
    <div class="file-upload">
      <span>Choose an image</span>
      <input type="file" name="uploadDress" id="uploadFile" required>
    </div>
  </div>
</form>

<script>
document.getElementById('uploadFile').addEventListener('change', function(e) {
  const file = e.target.files[0];
  if (!file) return;
  
  const reader = new FileReader();
  reader.onload = function(event) {
    // 把图片DataURL存入localStorage
    localStorage.setItem('tempUploadedImage', event.target.result);
    // 跳转到预览页面
    window.location.href = 'dress-preview.html';
  };
  reader.readAsDataURL(file);
});
</script>

接收页面修改：

window.onload = function() {
  const imgData = localStorage.getItem('tempUploadedImage');
  if (imgData) {
    document.getElementById('myImg').src = imgData;
    // 用完可以删掉，避免占用本地存储
    localStorage.removeItem('tempUploadedImage');
  }
};

局限性：localStorage有大小限制（一般约5MB），太大的图片存不下；且必须是同域页面才能访问。

方案2：用sessionStorage（临时会话传递） #

用法和localStorage几乎完全一样，只是把localStorage换成sessionStorage——它的特点是浏览器关闭后数据自动清除，适合临时传递，更安全。

方案3：用window.postMessage（跨域或新窗口场景） #

如果是通过新窗口打开预览页面，可以用postMessage传递图片数据：

上传页面JS：

document.getElementById('uploadFile').addEventListener('change', function(e) {
  const file = e.target.files[0];
  if (!file) return;
  
  const reader = new FileReader();
  reader.onload = function(event) {
    const previewWindow = window.open('dress-preview.html');
    // 等预览页面加载完成后发送消息
    previewWindow.onload = function() {
      // 第二个参数填目标域名更安全，比如'https://yourdomain.com'
      previewWindow.postMessage({ type: 'uploadedImage', data: event.target.result }, '*');
    };
  };
  reader.readAsDataURL(file);
});

接收页面JS：

window.addEventListener('message', function(e) {
  // 可以验证来源域名，提升安全性
  // if (e.origin !== 'https://yourdomain.com') return;
  
  if (e.data.type === 'uploadedImage') {
    document.getElementById('myImg').src = e.data.data;
  }
});

什么时候必须用服务端（比如PHP）？ #

如果遇到以下场景，纯前端方案就满足不了了，必须依赖服务端：

• 需要把图片永久保存到服务器，而不是仅仅临时在页面间传递；
• 图片体积过大，超过了localStorage/sessionStorage的容量限制；
• 跨域场景复杂，postMessage无法满足需求，或者需要持久化存储；
• 需要对图片进行后端处理（比如压缩、裁剪、格式转换）后再使用。

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