jQuery image upload with dynamic loading

Question

I have a single image form I would like to upload my images with for a store page. It simply needs to be clicked, show the upload box, and then autoSubmit when they select the image and replace the one image with the new uploaded item.

Here is the current page layout, with no actual upload button. On image click, we will show the upload windows on users PC:

This is the code for the highlighted area in the HTML field

<div class="uploader">
    <form method="POST" id="upload_image">
        <img src="/img/upload.png" id="imageUpload" alt="upload" />
    </form>
</div>

So once the form submits, using an Ajax request, when it returns and is successful I plan to store the image name (usually the current time() as filename) as a session variable, now I need to show a Loading... image while the upload process happens and then replace the imageUpload with the new image located in /img/thumbs/NEWIMAGENAMEHERE.png.

Question Time Is there a jQuery function that I can use to replace the image with the loading image and then the loaded image once upload completes? Is there a jquery library already for SINGLE image upload like this? all the library's I have found work for multiple images and since we only support one image on this store layout, we don't want multiple image upload.

Thanks

I am looking at plugins.jquery.com/singleuploadimage as well. Any knowledge on this plugin? I just found it after I posted. — Kaboom
– Kaboom, Commented Jan 16, 2017 at 15:37
You misunderstood my post. What I was saying is that you can display the image instantly with javascript without uploading it to your server; and only upload it upon form submission. If what you want is to display the selected image to the user, there's no point in transferring the image twice, when he already has it on his device. — Cârnăciov
– Cârnăciov, Commented Jan 16, 2017 at 15:47

Kaboom · Accepted Answer · 2017-01-16 16:15:23Z

Thanks to suggestion from @aron9forever I have decided instead of upload the image right away on it's own, I would simply display the image and then upload on form submit. This does pose the annoying issue that when they submit the form, if there is an issue, that they need to re-click upload image but I may have a way around that using $_POST variables.

<div class="uploader">
    <img id="imagetoUpload" src="/com/img/upload.png" alt="upload">
</div>
<input type="file" id="productImage" style="display:none;" name="img" value="">

Using this jQuery

$(function() {
    function readURL(input) {
        if(input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#imagetoUpload').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    };
    $("#productImage").change(function(){
        readURL(this);
    });
    $("#imagetoUpload").click(function() {
        $("input[id='productImage']").click();
    });
});

Collectives™ on Stack Overflow

jQuery image upload with dynamic loading

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related