Javascript to change background of element with id

Question

I have a file upload element:

<input type="file" name='image1' id='image1'>

Then i have a button:

<button onclick="addphotos()">Add photos</button>

The addphotos() function is:

function addphotos() {
  var file1 = document.getElementById('image1').files[0];
  var img1=file1.name.split(/(\\|\/)/g).pop();
  var pic1 = "url(" + file1 + ")";
  document.getElementById("right").style.backgroundImage=pic1;
}

As far as I know, the last line's syntax should be correct but I think I am missing something there. Reference for last line syntax - http://www.w3schools.com/cssref/tryit.asp?filename=trycss_js_background-image

EDIT: Its not working. No image is being put on the cube's face.

Answer 1

 document.addEventListener('DOMContentLoaded', function() { var input = document.getElementById('input'); var container = document.getElementById('image-block'); function onFilePicked(event) { var file = event.target.files[0]; var reader = new FileReader(); reader.onload = function(event) { var image = event.target.result; container.style.backgroundImage = 'url(' + image + ')'; }; reader.readAsDataURL(file); } input.addEventListener('change', onFilePicked); }); 

 #image-block { width: 100px; height: 100px; } 

 <input type="file" id="input"> <div id="image-block"></div>