2014-02-21 108 views
0

我有一個使用Jquery Validate插件進行驗證的表單。該表單有一個文件輸入,用戶可以使用該輸入上傳他/她的個人資料圖片。現在,使用驗證插件提交處理我張貼整個表格到PHP文件,但服務器腳本是無法讀取$_FILE['my_id']文件上傳PHP AJAX

的形式爲:

<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

請幫我想出解決辦法。

+0

試試'如果($ _ FILES [ 'facul_pic'] [ '名稱']!= 「」)' – krishna

+0

沒有運氣..不過-3 –

+0

試試我的答案。它可能會幫助你 – krishna

回答

4

注:有關更完整的方案看How can I upload files asynchronously?


發送通過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"); 
     } 

    }); 
} 
+0

OK。看起來我已經過去了。謝謝,但我有500內部服務器錯誤。我想腳本的其餘部分有問題,將不得不重新檢查。但是formdata不夠好。 –

+0

@Genocide_Hoax是FormData是比較新的。或者,您可以使用iframe作爲後備 – Spokey

+0

iframe可以詳細說明嗎? –

0

試試這個

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

嘗試t o通過整個數組作爲滾動這樣

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