使用JavaScript实现表单提交后传递输入值与图片到另一页面的方法咨询

实现思路 #

同域页面间传递表单数据+图片优先使用localStorage存储，可避开URL参数长度限制，且原生API调用简单，无需引入额外依赖。

需修改的现有代码部分 #

1. 补充缺失变量 + 新增全局变量存储图片base64 #

在现有JS代码最顶部添加：

// 原有代码缺失的form变量声明
var form = document.getElementById('form');
// 存储上传图片的base64数据
var uploadedImage = '';

2. 改造图片加载函数，存储图片数据 #

修改loadimage函数：

var loadimage = function(event) {
  var reader = new FileReader();
  reader.onload = function() {
    var output = document.getElementById('photos')
    output.src = reader.result;
    // 新增：把图片base64存到全局变量
    uploadedImage = reader.result;
  };
  reader.readAsDataURL(event.target.files[0]);
};

3. 改造提交函数，存储数据并跳转页面 #

修改Submit函数：

function Submit(event) {
  event.preventDefault();
  var nameoutput = document.getElementsByClassName('nameselect')[0];
  // 非空校验，避免提交空数据
  if(!nameoutput.value || !uploadedImage) {
    alert('请选择姓名并上传图片');
    return false;
  }
  // 存数据到localStorage
  localStorage.setItem('submitName', nameoutput.value);
  localStorage.setItem('submitImage', uploadedImage);
  
  // 跳转到目标页面，替换成你自己的目标页面地址
  window.location.href = 'result.html';
}

目标页面（result.html）代码示例 #

在目标页面读取localStorage中的数据并展示即可，示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>提交结果</title>
  <style>
    #showName { font-size: 20px; }
    #showImage { width: 300px; height: auto; border-radius: 5px; }
  </style>
</head>
<body>
  <h3>提交成功，数据如下：</h3>
  <h4 id="showName"></h4>
  <img id="showImage" src="" alt="上传的图片">

  <script>
    // 读取存储的数据
    const submitName = localStorage.getItem('submitName');
    const submitImage = localStorage.getItem('submitImage');

    // 渲染到页面
    if(submitName && submitImage) {
      document.getElementById('showName').textContent = '提交人：' + submitName;
      document.getElementById('showImage').src = submitImage;
      // 可选：读取后清除存储的数据，避免下次打开页面还显示旧数据
      // localStorage.removeItem('submitName');
      // localStorage.removeItem('submitImage');
    } else {
      document.body.innerHTML = '<p>未找到提交数据，请先提交表单</p>';
    }
  </script>
</body>
</html>

注意事项 #

• 两个页面必须在同域环境下运行（相同域名、端口、协议），否则localStorage无法共享数据
• 如果你需要上传多张图片，只需要把uploadedImage改成数组格式，遍历event.target.files存储所有图片的base64即可
• 如果需要跨域传数据，可通过后端接口中转，先把数据提交到后端接口，再在目标页从后端拉取数据即可

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