Change background div based on file selection selection

Question

I am looking for a way to change the background image of a div when the user selects an image from a form input. As you can see below, I have an input type. When the user selects the file they want, I would like div # imgHolder to change the background based on the selected file. Any thoughts?

<div id="simpleDialog" style="width: 350px; height: 350px; display:none;" scrolltop="0"> <br> <div id="imgHolder" style="width:200px;height:200px;background-image: url(images/gray.png)"></div> <br> <form id="userForm" align="center"> <fieldset> <legend>Artist Info</legend> <input type="file" name="artistImage" id="artistImage" style="border: none;float:left"><br><br> <label for="text" style="float:left">Enter URL:</label> <input type="text" name="website" id="website" value="" required="required"> </fieldset> </form> <input type="button" id="submit" value="Submit" /> <input type="button" id="cancel" value="Cancel" /> </div> 

Answer 1

Since you checked this html5 , you understand that this is an advanced browser feature.

What you ask for will require FileReader, available in most of all modern browsers (even IE).

 // Bind to the change event of our file input $("input[name='myFileSelect']").on("change", function(){ // Get a reference to the fileList var files = !!this.files ? this.files : []; // If no files were selected, or no FileReader support, return if ( !files.length || !window.FileReader ) return; // Only proceed if the selected file is an image if ( /^image/.test( files[0].type ) ) { // Create a new instance of the FileReader var reader = new FileReader(); // Read the local file as a DataURL reader.readAsDataURL( files[0] ); // When loaded, set image data as background of page reader.onloadend = function(){ $("html").css("background-image", "url(" + this.result + ")"); } } });​ 

I just tested the above code in Internet Explorer 10, Chrome 19/21, Firefox 12/13 and Opera 11.64 and found that it worked without problems.

Older browsers that do not support FileReader will simply be silent. There are no images, there were no exceptions.

Fiddle: http://jsfiddle.net/jonathansampson/K3A9r/

Answer 2

UPDATE

If you want to access images located on your local computer, you can do this using the HTML5 File API .

For example:

 <input type="file" id="files" name="files[]" multiple /> <output id="list"></output> <script> function handleFileSelect(evt) { var files = evt.target.files; // FileList object // Loop through the FileList and render image files as thumbnails. for (var i = 0, f; f = files[i]; i++) { // Only process image files. if (!f.type.match('image.*')) { continue; } var reader = new FileReader(); // Closure to capture the file information. reader.onload = (function(theFile) { return function(e) { // Render thumbnail. var span = document.createElement('span'); span.innerHTML = ['<img class="thumb" src="', e.target.result, '" title="', escape(theFile.name), '"/>'].join(''); document.getElementById('list').insertBefore(span, null); }; })(f); // Read in the image file as a data URL. reader.readAsDataURL(f); } } document.getElementById('files').addEventListener('change', handleFileSelect, false); </script> 

Answer 3

You can write jQuery by clicking on the form input image to change the css background-image #imgHolder .

Answer 4

Due to the security of modality browsers, it will not allow you to access the file from the local computer and display it in the browser if you do not use the HTML5 FileReader () function (unfortunately, all browsers will not be supported as of now).