I am using jquery-ajax to check on if the file already appear in my server.

I've this code:

Upload an Event Photo <br>
<input type='file' name='imageSrc' id='imageSrc' /><br>
<a href='#' class='uploadPhoto'>Upload Image</a><br>
<div class='uploadMessage'></div>
<span>Maximum size: 1MB (jpg,png,gif)</span>

This really is my jquery code:

jQuery(document).ready(function() {
    jQuery('.uploadPhoto').click(function(){
        // alert(1);
        jQuery.ajax({
            type: "POST",
            url: "index.php?option=com_eventsandrsvp",
            data: "task=uploadEventPhoto&format=raw",
            success: function(data) {
                jQuery(".uploadMessage").html(data);
            }
        })
    });
});

I wish to obtain the information which was there within the <input type='file' name='imageSrc' id='imageSrc' />

I understand that that's personal files type so you will find information for example: title,type,size, and tmp_title.

Wouldso would I actually do that using ajax? I'm trying to utilize a GET method however it does not work. maybe since it only creates <input type='text' />

Any help could be greatly appreciated.

Thanks!

You cannot upload files using just jQuery.ajax(), to upload files via ajax, you are able to turn to:

  • Expensive
  • Iframe trick

Above techniques get their own disadvantages though.

Fortunately, there is available nice script uploadify will upload files via ajax easily.