How to upload image file from computer and set as div background image using jQuery?

Question

The HTML code for image file input:

<input type="file" autocomplete="off" name="background-image" accept="image/*" />

The destination div block where I want to dynamically set the background image:

<div class="clock"></div>

The jQuery function I'm currently using for setting image file uploaded as div background image:

$(".background>div>input[type=file]").change(function () {
    var fileExtension = ['jpeg', 'jpg', 'png', 'gif', 'bmp'];
    if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
        alert("Only '.jpeg','.jpg', '.png', '.gif', '.bmp' formats are allowed.");
    }
    else {
        $(".clock").css("background-image",'url("' + $(".background>div>input[type=file]").val() + '")');
    }
});

The issue is that the background-image is not being set. This may possibly be because when I checked with browser inspector, the file upload is not containing file url. Note: The background-color of .clock is set to white initially.Also I'd not like to use a server since my intention is to keep it as client side only application.

score 57 · Accepted Answer · answered Jul 11 '15 at 05:39

57

This may solve your problem

JS FIDDLE

HTML

<input type='file' id='getval' name="background-image" /><br/><br/>
<div id='clock'></div>

CSS

#clock{
   background-image:url('');
   background-size:cover;
   background-position: center;
   height: 250px; width: 250px;
   border: 1px solid #bbb;
}

PURE JAVASCRIPT

document.getElementById('getval').addEventListener('change', readURL, true);
function readURL(){
   var file = document.getElementById("getval").files[0];
   var reader = new FileReader();
   reader.onloadend = function(){
      document.getElementById('clock').style.backgroundImage = "url(" + reader.result + ")";        
   }
   if(file){
      reader.readAsDataURL(file);
    }else{
    }
}

answered Jul 11 '15 at 05:39

Malik Naik

1,472
14
16

7

I'd like to give you an extra +1 for the **pure** javascript solution – Jaromanda X Jul 11 '15 at 05:46
2

further reading on the subject: https://developer.mozilla.org/en-US/docs/Web/API/FileReader – Deryck Jul 11 '15 at 05:47
It's working, but if you could help with what these lines do, it'd be great. – RBk Jul 11 '15 at 05:48
In FireFox, this is very slow for big files like 3 MB+. CPU spikes to 100% – Typewar Jan 07 '20 at 16:11

score 11 · Answer 2 · answered Jul 11 '15 at 07:23

11

It's small way to do this without using FileReader.

http://jsfiddle.net/PuneetChawla/vqn7r0nj/

HTML

<input type='file' id='getval' name="background-image" onchange="readURL(event)" /><br/><br/>
<div id='clock'></div>

CSS

#clock{
           background-image:url('');
           background-size:cover;
           background-position: center;
           height: 250px; width: 250px;
           border: 1px solid #bbb;
            }

JavaScript

function readURL(event){
         var getImagePath = URL.createObjectURL(event.target.files[0]);
         $('#clock').css('background-image', 'url(' + getImagePath + ')');
        }

Explanation - The URL.createObjectURL() static method creates a DOMString containing an URL representing the object given in parameter.

answered Jul 11 '15 at 07:23

Puneet Chawla

5,729
4
16
33

what about the if(file){ } condition? – RBk Jul 11 '15 at 07:28
Rijurekh - I didn't added that condition, Now i just specified to get image and display in div in short way. That logic can be easily implemented. Just try it by ownself otherwise i will update my answer with adding that condition. – Puneet Chawla Jul 11 '15 at 07:33
You just need to add a condition to check extension is correct or not like .jpge or .gif. i don't think there is need to any other logic that needs to be implemented. – Puneet Chawla Jul 11 '15 at 07:40

Gaurav Saini · Answer 3 · 2019-03-30T09:21:00.063

1

var loadFile = function(event) {
    var output = document.getElementById('output');
    output.style.backgroundImage= "url("+URL.createObjectURL(event.target.files[0])+")";
  };

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<input type="file" accept="image/*" onchange="loadFile(event)">
<div style="width: 500px;height: 500px;" id="output"></div>
</body>
</html>

edited Mar 30 '19 at 09:21

answered Mar 30 '19 at 09:06

Gaurav Saini

21
3

Please edit this answer to explain why your code works and how it solves the OP's issue – jro Mar 30 '19 at 09:32

How to upload image file from computer and set as div background image using jQuery?

3 Answers3

Linked