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 https://plugins.jquery.com/singleuploadimage/ as well. Any knowledge on this plugin? I just found it after I posted. — Kaboom, Jan 16 '17 at 15:37
http://stackoverflow.com/questions/554273/changing-the-image-source-using-jquery — Cârnăciov, Jan 16 '17 at 15:38
Also, websites such as imgur put the image there without uploading it. It makes no sense to download the image from the client just to upload it back to him. — Cârnăciov, Jan 16 '17 at 15:40
@aron9forever its a store management script... you are downloading the image, for example: from a users phone, and then it uploads to the server so they can post an image with the product. Only staff members can use this function. And don't want to use imgur since the host will have to host its own images for other reasons — Kaboom, Jan 16 '17 at 15:41
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, Jan 16 '17 at 15:47
The image form uploads separate from everything else on the page to stop from users submitting the page and missing a field, then having to go back and re upload the image again which if they are doing it from their phone can get annoying sometimes, that's why I wasn't simply doing it that way.but I may switch to that — Kaboom, Jan 16 '17 at 15:53

score 1 · Answer 1 · answered Jan 16 '17 at 16:15

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();
    });
});

jQuery image upload with dynamic loading

1 Answers1