Display image after select with javascript

Question

I made JS for displaying an image after selecting it. Here is the code

html code

<input type="file" id="file_photo" onchange="preview_image(event)" name="item_image"  ></input>
<img id='output_image'/>

JS code

function preview_image(event){

    document.getElementById('output_image').style.display='block';
    var reader = new FileReader();
    reader.onload = function(){
        var output = document.getElementById('output_image');
        output.src = reader.result;
    }
    reader.readAsDataURL(event.target.files[0]);
};

It success to display. But the question is, could I put the output image inside css url background image?

If the html is like this.

<label for="file_photo" class="file">  
   <div class="camera_icon" style="background: url() center center no-repeat #d7d7d7;background-size: cover;">
         <img src="/public/img/stock/icon07.png">
         <img src="/public/img/stock/icon06.png" class="plus_icon">
    </div>
    <input type="file" id="file_photo" onchange="preview_image(event)" name="item_image"  ></input>
 </label>

could I put the output image in

style="background: url() center center no-repeat #d7d7d7;background-size: cover;"

because I need to follow the css file.

Possible duplicate of Javascript-Setting background image of a DIV via a function and function parameter — M. Eriksson
– M. Eriksson, Commented Jun 13, 2018 at 5:12

Ash · Accepted Answer · 2018-06-13 05:24:29Z

1

Here is a working fiddle for you mate : http://jsfiddle.net/qvxg6ok4/12/

You need to assign a formulated URl property for div's background image with the data url you are getting from the file control.

output.style.backgroundImage = "url('" + reader.result + "')"

This fiddle is with searching with class name : http://jsfiddle.net/qvxg6ok4/14/

answered Jun 13, 2018 at 5:24

Ash

2,6152 gold badges22 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Charu Maheshwari · Accepted Answer · 2018-06-13 05:32:01Z

1

You need to have the path/src for the image you want to apply.

and then you may user the following code

document.getElementById('camera_icon').style.backgroundImage="url({{images/img.jpg}})";

Try using this fiddle http://jsfiddle.net/LvsYc/15724/

    <label for="file_photo" class="file">  
   <div class="camera_icon" id="camera_icon">
         <img src="/public/img/stock/icon07.png">
         <img src="/public/img/stock/icon06.png" class="plus_icon">
    </div>
    <input type="file" id="file_photo" name="item_image"  ></input>
 </label>
    <style>
    .camera_icon {
  background-repeat: no-repeat;
  background-size: cover;
  background-color:#d7d7d7;
  background-position: center center;
  height:300px;
}
    </style>
    <script>
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                //$('#blah').attr('src', e.target.result);
                document.getElementById('camera_icon').style.backgroundImage="url( " + e.target.result + ")";
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#file_photo").change(function(){
        readURL(this);
    });
    </script>

answered Jun 13, 2018 at 5:32

Charu Maheshwari

1,6531 gold badge11 silver badges9 bronze badges

1 Comment

Ferdinand Over a year ago

thank you guys for helping me.. i really appreciate it so much!!

charan kumar · Accepted Answer · 2018-06-13 05:29:01Z

0

have you tried like this,

function preview_image(event){

document.getElementsByClassName('camera_icon').style.display='block';
var reader = new FileReader();
reader.onload = function(){
    var output = document.getElementsByClassName('camera_icon');
    output.style.backgroundImage= reader.result;
}
reader.readAsDataURL(event.target.files[0]);
};

use background image instead of src of image

edited Jun 13, 2018 at 5:29

answered Jun 13, 2018 at 5:12

charan kumar

2,1662 gold badges21 silver badges26 bronze badges

2 Comments

Ash Over a year ago

Are you not supposed to get array of objects matching "getElementsByClassName" ?

Ash Over a year ago

And the data url is not going to work with simple assignment to backgroundimage. And on top of that, there is no such property for an object

Collectives™ on Stack Overflow

Display image after select with javascript

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related