File upload problems in jQuery

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"

you use ajax() or post() or get() or you just doing that with php?? — Mohamed-Yousef, Oct 24 '15 at 01:53
I'm a beginner so don't know much, using jquery, I don't want the page to reload, I just want if user chooses a file it should display on the page. — Akshaye JH, Oct 24 '15 at 01:55
http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously — Mohamed-Yousef, Oct 24 '15 at 01:57

score 0 · Answer 1 · answered Oct 24 '15 at 02:00

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>

score 0 · Accepted Answer · answered Oct 24 '15 at 05:11

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>

File upload problems in jQuery

2 Answers2