我有一个简单的文件上传表单,只有当我从表单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();
});
});
[你看了在浏览器的开发者工具的AJAX请求/响应?你有没有在项目中包含jQuery库?是否有任何错误报告?你在网络服务器上运行这个吗?](http://jayblanchard.net/basics_of_jquery_ajax.html) –
感谢您的回复, – bilcker
感谢您的回复,没有错误,我已经包含了jquery库。是的,我正在服务器上运行,并且当我在开发人员工具中查看响应时,我所得到的仅仅是和响应上传的对象:“您必须上传文件才能继续。”有没有更好的方法来审查答复? – bilcker