2017-06-20 51 views
0

我有一个简单的文件上传表单,只有当我从表单html文件中删除ajax脚本时才能正常工作。如果没有提交,我将被带到一个空白页面,显示正确的错误或成功消息(它应该像验证一样)。文件上传和PHP验证仅适用于不使用ajax文件

如果我包含它,它会绕过我所有的参数并跳到最后一个错误。在那里说你必须上传一个文件才能继续。

在我的ajax文件中是否存在缺少的东西?我无法弄清楚为什么它跳过我所有的验证。

感谢您的帮助,您可以给

表HTML文件

<form enctype="multipart/form-data" id="anytimereg-form" class="shake" method="post" action="test-process-form.php'?>">     
    <div id="frm-filehandler"> 
     <div id="file-drop" class="well"> 
      <input type="file" name="upload" id="uplfile" class="inputfile" /> 
      <label for="uplfile"><i class="fa fa-upload" aria-hidden="true"></i>Choose a file</label> 
     </div><!--end #file-drop--> 
    </div><!--end #frm-filehandler--> 
    <input type="hidden" name="action" value="upload"/> 
    <button id="submit" name="submit" type="submit" class="action-button btn-lg">Submit Registration</button> 
</form> 

测试process.php

<?php 
$errors = array(); 
$data = array(); 

// A list of permitted file extensions 
$allowed = array('png', 'jpg', 'pdf'); 

if(isset($_FILES['upload']) && $_FILES['upload']['error'] == 0){ 

    $extension = pathinfo($_FILES['upload']['name'], PATHINFO_EXTENSION); 
    //Max Fiels Size 
    $maxsize = 2097152; 
    //File Size 
    $file_size = $_FILES['upload']['size']; 
    //The File Path 
    $file_path = '../../../../../upl_docs/'; 
    //The File Name 
    $file_name = $_FILES['upload']['name']; 

    //Is the file type allowed 
    if(!in_array(strtolower($extension), $allowed)){ 
     $errors['upload'] = 'File type not allowed'; 

    } 
    //Does the file already exist 
    if(file_exists($file_path.$file_name)){ 
     $errors['upload'] = $file_name.' That file already exists. Please select another or rename your file.'; 

    } 
    //is the file size to big 
    if($file_size >= $maxsize){ 
     $errors['upload'] = 'Your File is too large. File must be less than 2 megabytes.'; 

    } 

    if(empty($errors)){ 
     //We upload the file to outside of the root directory for security reasons 
     if(move_uploaded_file($_FILES['upload']['tmp_name'], $file_path.$file_name)){ 
      $success['upload'] = $file_name.' Message: File has been uploaded'; 

      $data['success'] = $success; 

     }else{ 
      $errors['upload'] = 'Could not find the directory'; 
     } 

     //$data['success'] = $success; 
    }//If empty of errors 
    else{ 
     $data['success'] = false; 
     $data['errors'] = $errors; 
    } 

}else{ 
    $errors['upload'] = 'You must upload a File to continue'; 
    $data['errors'] = $errors; 
} 
echo json_encode($data); 
?> 

阿贾克斯文件

// Set up an event listener for the contact form. 
$(form).submit(function(event) { 
    $('.error-message').remove(); 
    // Serialize the form data. 
    var formData = $(form).serialize(); 

    $.ajax({ 
     type: 'POST', 
     url: $(form).attr('action'), 
     data: formData, 
     dataType :'json', 
     encode:true 
    }) 
    .done(function(data){ 
     //Log the data into the console so that we can be sure what is happening 
     console.log(data); 

     //If we do have errors create the 
     if(!data.successmessage){ 
      if(data.errors){ 
       $(form).removeClass('success'); 
       $('.submit-success').remove(); 

       $(form).addClass('form-has-error'); // add the form-has-error-class 

       if(data.errors.upload){ 
        $('#frm-filehandler').addClass('has-error'); // add the error class to show red input 
        $('#frm-filehandler').append('<div class="error-message"><p>' + data.errors.upload + '</p></div>'); 
        // add the actual error message under our input 
       } 
       $('footer').prepend('<div class="error-message"><p>There are errors with your submission. Errors will be marked in red</p></div>'); 

      }//end data errors 
     }//end no data successmessage 

     else if(data.successmessage){ 
      //Remove the errors stuff 
      $('.error').remove(); 
      $('.error-message').remove(); 
      $(form).removeClass('form-has-error'); // add the form-has-error-class 
      $('.submit-success').remove(); 
      //Add the success stuff 
      $(form).addClass('success'); 


      $('footer').prepend('<div class="success-message"><p>' + data.successmessage + '</p></div>'); 

     }//End if successmessage 
    })//end done function 

    .fail(function(data){ 
     //If there is a failed submission lets log the errors 
     console.log(data); 
    }); 

    //Stop the broweser from submitting the form 
    event.preventDefault(); 
    }); 
}); 
+0

[你看了在浏览器的开发者工具的AJAX请求/响应?你有没有在项目中包含jQuery库?是否有任何错误报告?你在网络服务器上运行这个吗?](http://jayblanchard.net/basics_of_jquery_ajax.html) –

+0

感谢您的回复, – bilcker

+0

感谢您的回复,没有错误,我已经包含了jquery库。是的,我正在服务器上运行,并且当我在开发人员工具中查看响应时,我所得到的仅仅是和响应上传的对象:“您必须上传文件才能继续。”有没有更好的方法来审查答复? – bilcker

回答

-1

老实说,你发布的AJAX代码是可怕的...多么可怕和令人费解的方式来显示/隐藏简单的成功或错误消息。我的意思是,如果表单成功验证,需要六行代码才能隐藏错误消息...

我会重新编程它所有的(包括PHP),使其更简单。不应该把所有的代码做成一个简单的AJAX表单。

+1

的确如此,但作为评论会更好。 – Goose