JS function to change image on page with file upload

Question

I'm currently pretty clueless when it comes to code, and I'm self-teaching at the moment. I want to be able to change the image on a webpage when the user selects a file to upload. There are loads of examples of this, I've been playing with the answer here Show an image preview before upload

However I have a page with multiple upload buttons, each with their own associated image. The example above monitors a specific input file element for change, then fires and updates the image element.

I'm trying to create a JS function based on the above that I pass the uploaded file object and the image element id to, called by the onChange event of the file input element.

It feels as if it should be simple, but it is highlighting my severe lack of understanding. Any help greatly appreciated.

edit:

I tried (no laughing please...)

HTML

<input type="file" id="file_n" onChange="swapImage(this,'image_n)/>
<img id="image_n" />

Javascript

function swapImage(e1, imgID) {
    var reader = new FileReader();

    reader.onload = function (e1) {
        // get loaded data and render thumbnail.
        document.getElementById(imgID).src = e.target.result;
    };

    // read the image file as a data URL.
    reader.readAsDataURL(this.files[0]);
};

Just to be clear file_n and image_n are supposed to be representing multiples of each, e.g. file_1, file_2, file_3 & corresponding image_1, image_2, image_3, hence why in my mind passing them to a function seems the way to go.

What have you tried so far in terms of code? Can you post it here? — Peter Gordon, Nov 25 '16 at 17:14
My main issue is my lack of JS skill. I am trying to use the original code I linked to, but have no idea how to make it work I;ll add my attempts to the original post above — westiej, Nov 25 '16 at 22:11
Here is a working example for you with proper variable naming: https://jsfiddle.net/qzksc9o1/1/ — Hkan, Nov 25 '16 at 22:48
Thanks, but that does the same as the source I originally linked, as it is still linked to 1 image id and 1 input file id. — westiej, Nov 25 '16 at 23:43

score 1 · Answer 1 · answered Nov 25 '16 at 23:43

The following are the basics to preview an image.

var m, f, v;

f = document.getElementById("files");
v = document.getElementById("viewport");

f.addEventListener("change", function(e){
 m = new FileReader();
 m.onload = function(e){
  v.src = e.target.result;
 };
 m.readAsDataURL(this.files[0]);
});

#viewport{
    width: 250px;
    height: 250px;
}

<img id="viewport" />

<input type="file" id="files" />
<img id="image" />

score 0 · Accepted Answer · answered Nov 26 '16 at 10:51

There is numerous way to do this depending on how your DOM looks like. eg query the first img after an file input or it's parents children, query the right img element using id, dataset, passing in the img element as second arguments using img's id swapImage(this, image_n) (All DOM id that don't override any global variables can be accessible without using any query selector)

var URL = window.URL || window.webkitURL

window.swapImage = function (elm) {
  var index = elm.dataset.index
  // URL.createObjectURL is faster then using the filereader with base64
  var url = URL.createObjectURL(elm.files[0])
  document.querySelector('img[data-index="'+index+'"]').src = url
}

<input type="file" data-index="0" onChange="swapImage(this)">
<img src="https://dummyimage.com/50x50/000/fff" data-index="0" width="50" height="50">

<br><br>

<input type="file" data-index="1" onChange="swapImage(this)">
<img src="https://dummyimage.com/50x50/000/fff" data-index="1" width="50" height="50">

<br><br>

<input type="file" data-index="2" onChange="swapImage(this)">
<img src="https://dummyimage.com/50x50/000/fff" data-index="2" width="50" height="50">

This is exactly what I was after, thank you very much. I can now have the page generate with php and add unique data-index values to the inputs and images as the page is created. — westiej, Nov 26 '16 at 15:55

JS function to change image on page with file upload

2 Answers2