Question

我有一个包含元素的页面

<input type="file" id="dialog-select-files"  multiple="" accept="image/jpeg" name='files[]'>

用户选择文件后，我想加载一个包含所选照片库的新页面。所以在我的第一页上，我用这种方式创建了URL

URL.createObjectURL(files[i])

并将其保存在Cookie中。

在我的第二页上，我从Cookie获取了网址，创建了元素'img'并在页面上显示：

var img = document.createElement("img");
img.src = getCookie(nameCookie);
gallery.appendChild(img);

但是URL是blob URL，就像 blob：http://localhost/8b67533a-f5f1-4529-8c3e-9829e6786be3，在我的第二页上找不到。

如何将选定的文件从一个页面传递到另一个页面？我想我应该用另一种方式（不保存在cookie中），但我无法在互联网上找到解决方案。

谢谢。

Answer 1

您可以将其转换为base64字符串，然后您可以将其保存在cookies或localStorage或sessionStorage中，并将其保存在那里。

function img2base64(imgSrc, cb) {
  var img = new Image();
  // formats: image/png, image/jpeg, image/jpg, image/gif, image/bmp
  var outputFormat = 'image/png';
  img.onload = function() {
    var canvas = document.createElement('CANVAS');
    var ctx = canvas.getContext('2d');
    var dataURL;
    canvas.height = this.naturalHeight;
    canvas.width = this.naturalWidth;
    ctx.drawImage(this, 0, 0);
    dataURL = canvas.toDataURL(outputFormat);
    cb(dataURL);
  };
  img.src = imgSrc;
}

var base64Str;
img2base64(imgSrc, function(dataUrl) {
   // do something
   console.log(dataUrl);
   base64Str = dataUrl;
   localStorage.setItem('img1', dataUrl);
});

将img（文件）传输到另一个页面

1 个答案: