文件上傳PHP AJAX

Question

我有一個正在使用Jquery Validate插件驗證的表單。 此表單具有文件輸入，用戶可以使用該文件上傳他/她的個人資料圖片。 現在，使用Validate插件提交處理程序，我將整個表單發布到PHP文件中，但服務器腳本無法讀取$_FILE['my_id']

表格：

<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>

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

處理器：

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

這里的聲明

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

返回False，因此AJAX響應始終為-3

請幫我解決這個問題。

Answer 1

注意：有關更多完整選項，請參閱如何異步上傳文件？

---

通過ajax發送文件需要一些更特殊的設置以及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");
        }

    });
}

Answer 2

嘗試這個

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
}

Answer 3

嘗試像這樣滾動瀏覽整個數組

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