File upload problems in jQuery - php

Question

here is an upload button, from which user can choose the file
Basically what I want to do is whenever user chooses an image from that,
it should display it at the place where that "trees" image is.
I'm stuck, really need some help.
here is the code
<div class="user-editable-div">
<div class="image-div" id="image_div"><img src="images/image.jpg" id="bg_image" /></div>
<span class="upload-btn">UPLOAD IMAGE</span>
<input type="file" id="uploader" />
<div class="content-div">
<h1 contenteditable="true">USER EDITABLE</h1>
<p contenteditable="true">All elements on this page are user editable. You can edit them by simply clicking or by clicking on the edit button next to the element.</p>
</div>
</div>
when the user chooses a file from "#uploader" it should display the image in "#bg_image"

Answer 1

With this code when you try to upload image with use file controller at that time that image preview in bg_image element
<div class="user-editable-div">
<div class="image-div" id="image_div"><img src="images/image.jpg" id="bg_image" /></div>
<span class="upload-btn">UPLOAD IMAGE</span>
<input type="file" id="uploader" onchange="readURL(this,this.id);"/>
<div class="content-div">
<h1 contenteditable="true">USER EDITABLE</h1>
<p contenteditable="true">
All elements on this page are user editable. You can edit them by simply clicking or by clicking on the edit button next to the element.
</p>
</div>
</div>
<script>
function readURL(input,ids)
{
if (input.files && input.files[0])
{
var reader = new FileReader();
reader.onload = function (e)
{
$('#bg_image').attr('src', e.target.result).width(650).height(375);
};
reader.readAsDataURL(input.files[0]);
}
}
</script>

Answer 2

Try attaching change event to input type="file" element , using URL.createObjectURL() with argument this.files[0] within change handler to set src of img with .attr(attribute, value)
$(":file").change(function(e) {
$("#bg_image").attr("src", URL.createObjectURL(this.files[0]))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="user-editable-div">
<div class="image-div" id="image_div"><img id="bg_image"src="" /></div>
<span class="upload-btn">UPLOAD IMAGE</span>
<input type="file" id="uploader" accept="image/*" />
<div class="content-div">
<h1 contenteditable="true">USER EDITABLE</h1>
<p contenteditable="true">All elements on this page are user editable. You can edit them by simply clicking or by clicking on the edit button next to the element.</p>
</div>
</div>