File Upload PHP AJAX

Question

I have an form which is being validated using the Jquery Validate plugin. This form has a file input using which the user can upload his/her profile pic. Now , using the Validate plugin submit handler I am posting the entire form to a PHP file but the Server Script is not able to read $_FILE['my_id']

The Form:

<form id="faculty-add" class="form-horizontal" enctype="multipart/form-data" role="form">
  <fieldset>
    <!-- Other Fields -->
    <div class="form-group">
     <label for="facprof" class="col-sm-2 control-label">Profile Pic</label>
     <div class="col-sm-9 col-sm-offset-1">
      <input type="file" class="form-control input-large" id="facul_pic" name="facul_pic" accept="image/png" placeholder="Profile Image">
     </div>
    </div>
    <!-- Other Fields -->
    <div class="form-group">
     <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Create Faculty Profile</button>
 </div>
</div>
  </fieldset>
</form>

THE JS:

$.validator.addMethod('filesize', function(value, element, param) {
        // param = size (en bytes)
        // element = element to validate (<input>)
        // value = value of the element (file name)
        return this.optional(element) || (element.files[0].size <= param);
    });
    $.fn.clearFormFields = function(area) {
        $(area).find('input[type="text"],input[type="email"]').val('');
        $(area).find('input[type="text"],input[type="email"]').removeClass('valid');
        $(area).find('textarea').val('');
        $(area).find('textarea').removeClass('valid');
        $(area).find('label').html('');
        $(area).find('label').removeClass('valid');
        $(area).find('label').removeClass('success');
        $(area).find('label').removeClass('error');
        $(area).find('div').removeClass('error');
        $(area).find('div').removeClass('success');
    };

$('#faculty-add').validate({
    rules : {
        facul_name : {
            minlength : 6,
            required : true
        },
        facul_pic : {
            required : true,
            accept : "png|jpe?g|gif",
            filesize : 6291456

        },
        facul_designation : {
            required : true,
            minlength : 6
        },
        facul_email : {
            required : true,
            email : true

        },
        datepicker : {
            required : true
        },
        qualification : {
            required : true,
            minlength : 2
        },
        area_interest : {
            required : true,
            minlength : 5
        }

    },
    highlight : function(element) {
        $(element).closest('.form-control').removeClass('success').addClass('error');
    },
    messages : {
        facul_name : {
            required : "Please Enter Faculty Name"
        },
        facul_pic : {

            required : "Choose Faculty Profile Picture"
        },
        facul_designation : {
            required : "Enter Faculty Desgnation Ex: Asst. Professor"
        },
        facul_email : {
            required : "Enter a valid Email ID"
        },
        datepicker : {
            required : "Choose the faculty's Date of Joining"
        },
        qualification : {
            required : "Mention Faculty's highest qualification"
        },
        area_interest : {
            required : "Please mention atleast one Area of Interest"
        }

    },
    success : function(element) {
        element.text('').addClass('valid').closest('.control-group').removeClass('error').addClass('success');
    },
    submitHandler : function(form) {

        $("#loader-modal").modal('show');
        $.ajax({
            type : "POST",
            url : 'proc/add_faculty.php',
            data : $(form).serialize(),
            success : function(data) {
                if (data === '0') {// Everything Successful
                    $("#loader-modal").modal('hide');
                    $("#success-modal").modal("show");
                    $(this).clearFormFields("#faculty-add");
                } else {
                    if (data === '-1') {// dB Update failed
                        $("#loader-modal").modal('hide');
                        $("#failure-modal").modal("show");
                    } else {
                        if (data === '-2') {// File Upload failed
                            $("#loader-modal").modal('hide');
                            $("#upload-fail-modal").modal("show");
                        } else {
                            $("#loader-modal").modal('hide');
                            $("#upload-fail-modal").modal("show");
                        }
                    }

                    $(this).clearFormFields("#faculty-add");
                }

            },
            error : function(XMLHttpRequest, textStatus, errorThrown) {
                $("#loader-modal").modal('hide');
                $("#failure-modal").modal("show");
                $(this).clearFormFields("#faculty-add");
            }
        });
        return false;
    }
});

The Processor:

if (isset($_FILES['facul_pic'])) {
    $file_name = $_FILES['facul_pic']['name'];
    $file_size = $_FILES['document']['size'];
    $file_tmp = $_FILES['document']['tmp_name'];
    $uploaded = $faculty -> upload_pic($file_name, $file_size, $file_tmp);
    if ($uploaded != "failed") {// else retruns file path
        $f_name = $_POST['facul_name'];
        $f_department = $_POST['facul_department'];
        $f_pic = $uploaded;
        $f_designation = $_POST['facul_designation'];
        $f_email = $_POST['facul_email'];
        $f_doj = $_POST['datepicker'];
        $f_qualification = $_POST['quallification'];
        $f_iExp_yr = $_POST['indus_year'];
        $f_iExp_mth = $_POST['indus_months'];
        $f_tExp_yr = $_POST['teach_years'];
        $f_tExp_mth = $_POST['teach_months'];
        $f_lPub = $_POST['pub_national'];
        $f_iPub = $_POST['pub_international'];
        $f_interest = $_POST['area_interest'];
        $resp = $faculty -> add_faculty($f_name, $f_department, $f_pic, $f_designation, $f_email, $f_doj, $f_qualification, $f_iExp_yr, $f_iExp_mth, $f_tExp_yr, $f_tExp_mth, $f_lPub, $f_iPub, $f_interest);
        if ($resp == true) {
            echo '0';
        } else {
            echo '-1';
        }
    } else {
        echo '-2';
    }
} else { 
    echo '-3';
}

Here the statement

if (isset($_FILES['facul_pic']))

Returns False and thus the AJAX response is always -3

Please Help me Figure this out.

Not able to receive file at server side, I'm using data : $(form).serialize() — Ketav
– Ketav, Commented Jul 30, 2016 at 8:34

Community · Accepted Answer · 2017-05-23 11:51:31Z

4

NOTE: For more complete options see How can I upload files asynchronously?

Sending files via ajax requires some more special settings and also the use of FormData

submitHandler: function (form) {
    var formData = new FormData(form);

    $.ajax({
        url: 'proc/add_faculty.php',
        type: 'POST',
        data: formData,
        contentType: false,
        processData: false
        success: function (data) {
            if (data === '0') { // Everything Successful
                $("#loader-modal").modal('hide');
                $("#success-modal").modal("show");
                $(this).clearFormFields("#faculty-add");
            } else {
                if (data === '-1') { // dB Update failed
                    $("#loader-modal").modal('hide');
                    $("#failure-modal").modal("show");
                } else {
                    if (data === '-2') { // File Upload failed
                        $("#loader-modal").modal('hide');
                        $("#upload-fail-modal").modal("show");
                    } else {
                        $("#loader-modal").modal('hide');
                        $("#upload-fail-modal").modal("show");
                    }
                }

                $(this).clearFormFields("#faculty-add");
            }

        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            $("#loader-modal").modal('hide');
            $("#failure-modal").modal("show");
            $(this).clearFormFields("#faculty-add");
        }

    });
}

edited May 23, 2017 at 11:51

CommunityBot

11 silver badge

answered Feb 21, 2014 at 9:24

Spokey

11k2 gold badges31 silver badges44 bronze badges

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

4 Comments

Genocide_Hoax Over a year ago

OK. it looks like I got past that. Thanks but I have 500 Internal Server Error. I guess there is a problem with the rest of script , will have to recheck that. But formdata is not support well enough.

Spokey Over a year ago

@Genocide_Hoax yes FormData is relatively new. Alternatively you can use iframes as a fallback

Genocide_Hoax Over a year ago

iframes as in ?can u elaborate?

Spokey Over a year ago

@Genocide_Hoax you create a hidden iframe with the url proc/add_faculty.php and post the data to it (you can use target attribute in form).

krishna · Accepted Answer · 2014-02-21 09:23:05Z

0

try this

if (!file_exists($_FILES['facul_pic']['tmp_name']) || !is_uploaded_file($_FILES['facul_pic']['tmp_name'])) 
{
    echo "file not uploaded";
}
else
{
   // do your stuff here
}

answered Feb 21, 2014 at 9:23

krishna

4,0892 gold badges32 silver badges56 bronze badges

Comments

Dino Satto · Accepted Answer · 2014-02-21 09:33:29Z

0

Try to scroll through the entire array as like this

foreach($_FILES as $name => $F){
        if($F['error']==UPLOAD_ERR_OK){
                            move_uploaded_file($F['tmp_name'],your_path);
                    }
}

answered Feb 21, 2014 at 9:33

Dino Satto

32 bronze badges

Collectives™ on Stack Overflow

File Upload PHP AJAX

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related