Is it possible to pass an image file from one HTML page to another?

Question

I've tried it using many examples, but nothing seems to work using only HTML and Javascript/jQuery. Here's what I've tried so far:

The code of the page where I upload the page:

  <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> 

The code of the page that will recieve the file:

  <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> 

And this is te Javascript of the page that recieves the file

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);
};

Is there any way I can use Javascript/jQuery to pass an image from one HTML page to another? Or it's something that I can only do on a server way (aka PHP )

Another thing I would like to mention is that, in the second HTML page, the div that contains the image preview is not inside a form.

Answer 1

Since you're moving from one page to the other, we can't do it the way I would prefer (web messaging).

You're using readAsDataURL , which gies you a string, so you can store that in localStorage or sessionStorage :

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

...and then in the other page load it:

someImage.src = localStorage.theImage;

Note that both web storage and data URLs have size limits, but if you're not dealing with gigabyte-size images, it should be fine. (IE8 limited data URLs to 32k, but IE8 doesn't support the File API that you're using to read the image, so...).

---

See Kaiido's answer about optionally using IndexedDB if available (falling back to local storage if not) via the localForage library.

Answer 2

^{Hesitated to make it part of a comment only, but...}

Don't store a binary file in localStorage. (and even less in a cookie...) It is not meant for this. localStorage is rather slow, and all synchronous. It also has a very limited storage capacity.

Instead, use IndexedDB , which offers a far more performant API (although far more complicated to use), and which can store binary files directly.

Using Mozilla's localForage library, it becomes as easy as:

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

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

Here is a fiddle demonstrating this since StackSnippet doesn't allow access to localStorage nor IndexedDB.

Note that IndexedDB offers the same protections as localStorage in terms of cross-origin requests.

Answer 3

You can store image in cookie or localStorage ;

You can store in cookie in following ways.

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"));
};

And localStorage in following ways.

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"));
};