是否可以將圖像文件從一個HTML頁面傳遞到另一HTML頁面？

Question

我已經使用許多示例進行了嘗試，但是僅使用HTML和Javascript / jQuery似乎沒有任何效果。 到目前為止，這是我嘗試過的方法：

我上傳頁面的頁面代碼：

  <form name="formSale" action="dress-preview.html" method="get"> <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> 

接收文件的頁面代碼：

  <div class="image-preview"> <div class="image"> <img id="myImg" src="#" alt=""> <div class="file-upload"> <span>Elige una foto</span> <input type="file" name="uploadDress" id="uploadFile" required> </div> </div> </div> 

這是接收文件的頁面的Javascript

window.onload = function(){ 
    var url = document.location.href, params = url.split('?')[1].split('&'), data = {}, tmp, tmp1 = [];

    for(var i = 0, l = params.length; i < l; i++){
       var j = i + 1;
       tmp = params[i].split("=");
       tmp1.push(tmp);
       data[tmp[0]] = tmp[1];
    }

   img_load(tmp1[0][1]);
}

function img_load(img){
    $(":file").change(function(){
        console.log(true);
        if(this.files && this.files[0]){
            console.log(true);
            var reader = new FileReader();
            reader.onload = imageIsLoaded;
            reader.readAsDataURL(this.files[0]);
        }
    });
}

function imageIsLoaded(e) {
   $('#myImg').attr('src', e.target.result);
};

有什么方法可以使用Javascript / jQuery將圖像從一個HTML頁面傳遞到另一HTML頁面？ 或者這是我只能通過服務器方式（aka PHP ）執行的操作

我想提到的另一件事是，在第二個HTML頁面中，包含圖像預覽的div不在窗體內。

Answer 1

由於您是從一頁移動到另一頁，因此我們無法按照我希望的方式（網絡消息傳遞）來完成。

您正在使用readAsDataURL ，它會為您readAsDataURL一個字符串，因此您可以將其存儲在localStorage或sessionStorage ：

// In `imageIsLoaded`
localStorage.theImage = e.target.result;

...然后在另一頁中加載它：

someImage.src = localStorage.theImage;

請注意，Web存儲和數據URL都有大小限制，但是如果您不處理千兆字節大小的圖像，那應該沒問題。 （IE8將數據URL限制為32k，但是IE8不支持您用來讀取圖像的File API，所以...）。

---

請參閱Kaiido的答案，有關是否可以通過localForage庫使用IndexedDB（如果可用）（如果沒有，請使用本地存儲）。

Answer 2

^{猶豫只將其作為評論的一部分，但...}

不要將二進制文件存儲在localStorage中。 （甚至在Cookie中更少）。 localStorage相當慢，並且都是同步的。 它還具有非常有限的存儲容量。

而是使用IndexedDB ，它提供了性能更高的API（盡管使用起來要復雜得多），並且可以直接存儲二進制文件。

使用Mozilla的localForage庫，它變得非常簡單：

function store() {
  localforage.setItem('myfile', f.files[0])
    .then(onfilesaved);
}

function getFile() {
  localforage.getItem('myfile')
    .then(useTheFile);
}

由於StackSnippet不允許訪問localStorage或IndexedDB，因此這里有個小提琴 。

請注意，就跨域請求而言，IndexedDB提供與localStorage相同的保護。

Answer 3

您可以將圖像存儲在cookie或localStorage ；

您可以通過以下方式存儲在Cookie中。

window.onload = function(){ 
    var url = document.location.href, params = url.split('?')[1].split('&'), data = {}, tmp, tmp1 = [];

    for(var i = 0, l = params.length; i < l; i++){
       var j = i + 1;
       tmp = params[i].split("=");
       tmp1.push(tmp);
       data[tmp[0]] = tmp[1];
    }

   img_load(tmp1[0][1]);
}

function img_load(img){
    $(":file").change(function(){
        console.log(true);
        if(this.files && this.files[0]){
            console.log(true);
            $.cookie("image", this.files[0]);
        }
    });
}

function imageIsLoaded(e) {
   $('#myImg').attr('src', $.cookie("image"));
};

和localStorage的方式如下。

window.onload = function(){ 
    var url = document.location.href, params = url.split('?')[1].split('&'), data = {}, tmp, tmp1 = [];

    for(var i = 0, l = params.length; i < l; i++){
       var j = i + 1;
       tmp = params[i].split("=");
       tmp1.push(tmp);
       data[tmp[0]] = tmp[1];
    }

   img_load(tmp1[0][1]);
}

function img_load(img){
    $(":file").change(function(){
        console.log(true);
        if(this.files && this.files[0]){
            console.log(true);
            // Store
localStorage.setItem("image", this.files[0]);
        }
    });
}

function imageIsLoaded(e) {
   $('#myImg').attr('src', localStorage.getItem("image"));
};