文件上传PHP AJAX [英] File Upload PHP AJAX

查看：130 发布时间：2017/11/7 22:19:38 php jquery ajax file-upload upload

本文介绍了文件上传PHP AJAX的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个使用Jquery Validate插件进行验证的表单。这种形式有一个文件输入，用户可以使用它来上传他/她的个人资料图片。现在，使用Validate插件提交处理程序，我将整个表单发布到PHP文件，但服务器脚本不能读取 $ _ FILE ['my_id']

表格：

 < form id =faculty-addclass =form-horizontalenctype =multipart / form-datarole =form> 
< fieldset> 
 <！ - 其他栏位 - > 
< div class =form-group> 
< label for =facprofclass =col-sm-2 control-label> Profile Pic< / label> 
< div class =col-sm-9 col-sm-offset-1> 
< input type =fileclass =form-control input-largeid =facul_picname =facul_picaccept =image / pngplaceholder =Profile Image> 
< / div> 
< / div> 
 <！ - 其他栏位 - > 
< div class =form-group> 
< div class =col-sm-offset-2 col-sm-10> 
< button type =submitclass =btn btn-default>创建Faculty个人资料< / button> 
< / div> 
< / div> 
< / fieldset> 
< / form>

JS：

  $。validator.addMethod（'filesize'，function（value，element，param）{
 // param = size（en bytes）
 / （元素）||（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'）; 
}; 
 $ b $（'＃faculty-add'）。validate（{
 rules：{
 facul_name：{
 minlength：6，
 required：true 
}，
 facul_pic：{
 required：true，
 accept：png | jpe？g | gif，
文件大小：6291456 
 
 $ b facul_designation：{
 required：true，
 minlength：6 
}，
 facul_email：{
 required：true，
电子邮件：真实的
 
，
 datepicker：{
 required：true 
}，
资格：{
 required：true，
 minlength：2 
}，
 area_interest：{
 required：true，
 minlength：5 
} 
 
}，
 highlight：function（element）{
 $（element）.closest（'。form-control'）。removeClass（'success ）.addClass（错误）; 
}，
消息：{
 facul_name：{
 required：Please Enter Faculty Name
}，
 facul_pic：{
 
需要：选择Faculty Profile Picture
}，
 facul_designation：{
 required：Enter Faculty Desgnation Ex：Asst。Professor
}，
 facul_email：{
 required：输入一个有效的电子邮件ID
}，
 datepicker：{
 required：选择教师的加入日期
}，
资格：{
要求：提到教师的最高资格
}，
 area_interest：{
 required：请提及至少一个兴趣范围
 } 
 $ b $，
 success：function（element）{
 element.text（''）。addClass（'valid'）。closest（'。control-group'） .removeClass（ '错误'）。addClass（成功'）; 
，
 submitHandler：function（form）{
 
 $（＃loader-modal）。modal（'show'）; 
 $ .ajax（{
 type：POST，
 url：'proc / add_faculty.php'，
 data：$（form）.serialize（），
成功：函数（数据）{
如果（数据==='0'）{//一切成功
 $（＃loader-modal）。modal（'hide'）; $ $ b $（＃success-modal）。如果（data ==='-1'）{// dB更新失败
 $（＃loader-modal）。modal（'hide'）; 
 $（＃failure-modal ）.modal（show）; 
} else {
 if（data ==='-2'）{//文件上传失败
 $（＃loader-modal） .modal（'hide'）; 
 $（＃upload-fail-modal）。modal（show）; 
} else {
 $（ ＃架模）模态（隐藏）。 
 $（＃upload-fail-modal）。modal（show）; 
 
 
 $ b $（this）.clearFormFields（＃faculty-add）; 
 
 
 $ b error：function（XMLHttpRequest，textStatus，errorThrown）{
 $（＃loader-modal）。modal（'hide'） ; 
 $（＃failure-modal）。modal（show）; 
 $（this）.clearFormFields（＃faculty-add）; 
} 
}）; 
返回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 = $已上传; 
 $ 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'; 
 
 
 
 $ b $ p 
 $ b $ p 
 
  pre $  if（isset（$ _ FILES ['facul_pic']））

返回False，因此 AJAX响应总是-3

  
 
 请帮我看看。 b 
解决方案
 注意：要获得更完整的选项，请参阅如何异步上传文件？
 
 
 
 
 
通过ajax发送文件需要一些更加特殊的设置，也可以使用 FormData  
  submitHandler：function（form）{
 var formData = new FormData（form）; 
 
 $ .ajax（{
 url：'proc / add_faculty.php'，
 type：'POST'，
 data：formData，
 contentType ：false，
 processData：false 
成功：函数（数据）{
 if（data ==='0'）{//一切成功
 $（＃loader- modal（'hide'）; 
 $（＃success-modal）。modal（show）; 
 $（this）.clearFormFields（＃faculty-add） ; 
} else {
 if（data ==='-1'）{// dB更新失败
 $（＃loader-modal）。modal（'hide'）; 
 $（＃failure-modal）。modal（show）; 
} else {
 if（data ==='-2'）{//文件上传失败
 $（＃loader-modal）。modal（'hide'）; 
 $（＃upload-fail-modal）。modal（show）; 
} else { 
 $（＃loa （'hide'）; 
 $（＃upload-fail-modal）。modal（show）; 
 
 
 $ b $（this）.clearFormFields（＃faculty-add）; 
 
 
 $ b error：function（XMLHttpRequest，textStatus，errorThrown）{
 $（＃loader-modal）。modal（'hide'） ; 
 $（＃failure-modal）。modal（show）; 
 $（this）.clearFormFields（＃faculty-add）; 
} 
 
}）; 
} 
  
 
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.
 解决方案 
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");
        }

    });
}


                        
这篇关于文件上传PHP AJAX的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！


                    
                        查看全文

文件上传PHP AJAX [英] File Upload PHP AJAX

问题描述

相关文章

PHP最新文章

热门教程

热门工具

登录关闭

文件上传PHP AJAX [英] File Upload PHP AJAX

问题描述

相关文章

PHP最新文章

热门教程

热门工具

登录 关闭

登录关闭