How to upload image using Ajax in PHP?

Question

I have a form

<form id="profile_imageform" class="image_form" enctype="multipart/form-data">

    <fieldset>
        <div class="entry">
            <label>Filename:</label>
            <input type="file" name="file" id="file" />
        </div>
    </fieldset>
    <div class="actions">
        <button type="submit">Save &amp; Close</button>( <a href="#/profile" class="cancel">Cancel</a> )
    </div>
</form>

and my js file look like

ProfileForm.prototype.init = function(){ var self = this;

    //Initialize properties
    this.view = $( "#profile_form_view" );
    this.imageForm = $( "#profile_imageform" );
    this.fields.id = this.imageForm.find( ":input[ name = 'id' ]" );
    this.fields.image = this.imageForm.find( ":input[ name = 'file' ]" );

    //Bind the submit handler
    this.imageForm.submit(function( event ){

        //Submit the form
        self.saveImage(this.fields.id.val(), this.fields.image.val());

        //Cancel default event
        return( false );

    });

 ProfileForm.prototype.saveImage = function( id, image, onSuccess, onError ){
    var self = this;

    application.ajax({
        url: "test.php",
        data: {
            method: "saveImage",
            id: id,
            image: image
        },
        success: function( response ){
            if (response.success){
                onSuccess( response.data );
            }else{
                onError( response.errors );
            }
        }

    });
};

but

this.fields.image.val()

returns the image name what i need is it's tmp_name. Will it possible to get it's tmp_name at jQuery? If so how?

But this php code also returns error

if (isset($_POST['method']))
{
    if (isset($_POST['image']))
    {
        echo $_FILES['image']['tmp_name'];
    }
}

Philip · Accepted Answer · 2011-12-27 04:30:17Z

3

Dont expect an error response if you dont do any error checking....

function file_upload_error_message($error_code) {
    switch ($error_code) {
    case UPLOAD_ERR_INI_SIZE:
        return 'The uploaded file exceeds the upload_max_filesize directive in    php.ini';
    case UPLOAD_ERR_FORM_SIZE:
        return 'The uploaded file exceeds the MAX_FILE_SIZE directive that was specified in the HTML form';
    case UPLOAD_ERR_PARTIAL:
        return 'The uploaded file was only partially uploaded';
    case UPLOAD_ERR_NO_FILE:
        return 'No file was uploaded';
    case UPLOAD_ERR_NO_TMP_DIR:
        return 'Missing a temporary folder';
    case UPLOAD_ERR_CANT_WRITE:
        return 'Failed to write file to disk';
    case UPLOAD_ERR_EXTENSION:
        return 'File upload stopped by extension';
    default:
        return 'Unknown upload error';
}
}

answered Dec 27, 2011 at 4:30

Philip

4,5822 gold badges22 silver badges28 bronze badges

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

6 Comments

user1066679 Over a year ago

i want to get that image's temp name in jQuery. how could i do that? pls help

Philip Over a year ago

The best way is to get a response from your server side language ( ? )... then re-lay it back to your callback, what language are you using?

Philip Over a year ago

Ok sorry I re-read you question..PHP. Your form is setup wrong for a start, your form input needs to be type=file and the key(name) your after is image!! <input type="file" name="file" id="file" /> === $_FILES['image'] is wrong, $_FILES['image'] === name=image

user1066679 Over a year ago

This line stores this.fields.image = this.imageForm.find( ":input[ name = 'file' ]" ); the image input field and when i enter this.fields.image.val(), it returns file name. my question is, is there any jquery method to get image's tmp_name???

Philip Over a year ago

when your dealing with forms, the rule of thumb is name=KEY value=VALUE, so in terms of PHP [NAME]=>VALUE, to answer your previous question this.imageForm.find("input[name=file]") will only work if you re-build a POSTED array such as "var post = { image : this.imageForm.find("input[name=file]") } " then $_POST('image') would === FILE

|

Sanjeev Chauhan · Accepted Answer · 2011-12-27 05:44:32Z

1

You can use JQuery File Upload Plugin Script - Uploadify

http://www.uploadify.com/demos/

http://www.uploadify.com/documentation/

answered Dec 27, 2011 at 5:44

Sanjeev Chauhan

4,1273 gold badges26 silver badges31 bronze badges

Collectives™ on Stack Overflow

How to upload image using Ajax in PHP?

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related