user1066679
user1066679

Reputation: 95

How to upload image using Ajax in PHP?

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'];
    }
}

Upvotes: 1

Views: 1240

Answers (2)

Sanjeev Chauhan
Sanjeev Chauhan

Reputation: 4097

You can use JQuery File Upload Plugin Script - Uploadify

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

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

Upvotes: 1

Philip
Philip

Reputation: 4592

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';
}
} 

Upvotes: 3

Related Questions