Getting the uploaded file information using jquery-ajax

Question

I'm using jquery-ajax to check whether the file already exist in my server.

I have 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 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 want to get the information that was there in the <input type='file' name='imageSrc' id='imageSrc' />

I know that that is a file type so there are information such as: name,type,size, and tmp_name.

How would I do that using ajax? I am trying to use a GET method but it doesn't work. maybe because it only works on <input type='text' />

Any help would be greatly appreciated.

Thanks!

Sarfraz · Accepted Answer · 2011-09-30 06:44:10Z

1

You can't upload files using just jQuery.ajax(), to upload files via ajax, you can resort to:

Flash
Iframe trick

Above methods have their own drawbacks though.

Fortunately, there exists nice script uploadify you can use to upload files via ajax easily.

answered Sep 30, 2011 at 6:44

Sarfraz

384k81 gold badges561 silver badges613 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Getting the uploaded file information using jquery-ajax

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related