我有一个包含文件上传和进度条的表单。我使用Ajax submit提交表单。如果成功但工作页面中的2个错误（如文件大小和扩展名）Ajax成功部分没有响应，则工作正常。
HTML表单：
<div class="col-md-8">
<form id='frm_upld' action="process.php" enctype="multipart/form-data" method="post" accept-charset="utf-8">
<div id="status"></div>
<div class="form-group">
<label >Title</label>
<input type="text" id="imgTitle" class="form-control" name="imgTitle" value="" placeholder="Title">
</div>
<div class="form-group">
<label >Description</label>
<input type="text" id="imgdes" class="form-control" name="imgdes" value="" placeholder="Description">
</div>
<div class="form-group">
<label >Email</label>
<input type="text" id="email" class="form-control" name="email" value="" placeholder="Email">
</div>
<div class="form-group">
<label >Contact</label>
<input type="text" id="contact" class="form-control" name="contact" value="" placeholder="Contact">
</div>
<div class="form-group">
<label class="label" for="FileUpload">
Image File</label>
<input id="fileToUploadgallery" name="fileToUploadgallery" type="file" >
<label class="label" for="FileUpload"> ( File Must be jpg, jpeg ,png type)</label>
</div>
<div id="progresscstom">
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success bar"></div >
<div class="progress-bar percent">0%</div >
</div>
</div>
<button type="submit" name="submit" value="Submit" id="submit" class="btn btn-success">Submit</button>
</form> <!-- End Reg-Form -->
</div>
脚本代码：
<script>
$(document).ready(function() {
var bar = $('.bar');
var percent = $('.percent');
var statusmsg = $('#status');
$('form').ajaxForm({
dataType: 'json',
beforeSubmit: function() {
$('#frm_upld').validate({
rules:
{
imgTitle:
{
required: true
},
imgdes:
{
required: true
},
email:
{
required: true
},
contact:
{
required: true,
number: true,
minlength: 11,
maxlength: 11
},
fileToUploadgallery:
{
required: true
}
},
// Messages for form validation
messages:
{
imgTitle:
{
required: 'Please enter Title'
},
imgdes:
{
required: 'Please enter Description'
},
email:
{
required: 'Please enter email address'
},
contact:
{
required: 'Please enter contact number'
},
fileToUploadgallery:
{
required: 'Please select a File'
}
} });
return $('#frm_upld').valid();
statusmsg.empty();
var percentVal = '0%';
bar.width(percentVal)
percent.html(percentVal);
$("#submit").prop('disabled', true); // disable button
},
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
bar.width(percentVal)
percent.html(percentVal);
},
success: function(data) {
var percentVal = '100%';
bar.width(percentVal)
percent.html(percentVal);
alert(data);
if(data.type ==='success'){
statusmsg.html(data.message);
$("#frm_upld")[0].reset();
$("#submit").prop('disabled', false); // enable button
$("html, body").animate({ scrollTop: 0 }, "slow");
}else if(data.type === 'error'){
statusmsg.html(data.message);
$("#submit").prop('disabled', false); // enable button
$("html, body").animate({ scrollTop: 0 }, "slow");
}
}
});
});
</script>
PHP代码：
<?php
header('Content-type: application/json');
// Your db connection here
if(isset($_POST['submit']) && !empty($_POST['imgTitle']))
{
$response = array('type'=>'', 'message'=>'');
$imgTitle = $_POST['imgTitle'];
date_default_timezone_set("Asia/Dhaka");
$upload_date = date('Y-m-d h:i:s');
//$type = 1;
$time = time();
// your post data
$fileName = $_FILES["fileToUploadgallery"]["name"]; //basename($_FILES["fileToUploadgallery"]["name"]);
$fileSize = $_FILES["fileToUploadgallery"]["size"];
$tmp_file = $_FILES['fileToUploadgallery']['tmp_name'];
//$imageFileType = pathinfo($fileName,PATHINFO_EXTENSION);
$upload_file_name = "uploads/" . $time; // file upload with time you can change the file name here
$extension1 = getExtension($fileName); // file extentions function calling
$extension = strtolower($extension1);
$target_file = $upload_file_name . "." . $extension;
$uploadOk = 1;
// Check if file already exists
if (file_exists($target_file)) {
$response['type'] = 'success';
$response['message'] = '<div class="alert alert-warning"><strong>File Already Exists </div>';
echo json_encode($response);
$uploadOk = 0;
}
// Check file size
if ($fileSize > 704857600) {
$response['type'] = 'error';
$response['message'] = '<div class="alert alert-warning"> File Size must be less than 700MB.</div>';
echo json_encode($response);
$uploadOk = 0;
}
// Allow certain file formats
if($extension != "png" && $extension != "mp4" && $extension != "docx" && $extension != "pdf" && $extension != "jpg") {
$response['type'] = 'error';
$response['message'] = '<div class="alert alert-warning"> File Extention must be jpg ,jpeg or png type.</div>';
echo json_encode($response);
$uploadOk = 0;
}
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
$response['type'] = 'error';
$response['message'] = '<div class="alert alert-warning"> Sorry, your file was not uploaded.</div>';
echo json_encode($response);
$uploadOk = 0;
// if everything is ok, try to upload file
} else {
if (move_uploaded_file($tmp_file, $target_file)) {
// $data = array ($imgTitle,$upload_date,$target_file);
$result = false; // "";// your data insert query
if($result){
$response['type'] = 'success';
$response['message'] = '<div class="alert alert-success"><strong>Congratulations!</strong> Added Successfully.</div>';
echo json_encode($response);
}else{
$response['type'] = 'error';
$response['message'] = '<div class="alert alert-warning"> Sorry, your file was not uploaded.</div>';
echo json_encode($response);
}
} else {
$response['type'] = 'error';
$response['message'] = '<div class="alert alert-warning"> Sorry, your file was not uploaded.</div>';
echo json_encode($response);
}
}
}else{
$response['type'] = 'error';
$response['message'] = '<div class="alert alert-warning"> Sorry, your file was not uploaded.</div>';
echo json_encode($response);
}
// getting file extentions
function getExtension($str) {
$i = strrpos($str,".");
if (!$i) { return ""; }
$l = strlen($str) - $i;
$ext = substr($str,$i+1,$l);
return $ext;
}
?>
答案 0 :(得分：3)
您的代码在SUCCESS上运行正常，因为输出只打印一次。
如果出现错误，JSON输出会因一个错误而回显两次，两次错误则会三次，依此类推。因此，JavaScript无法验证输出。
您需要更改代码，以便JSON仅打印一次，并连接错误消息以立即显示所有可能的错误。
进行了整改，请尝试以下代码：
// Check if file already exists
if (file_exists($target_file)) {
//$response['type'] = 'success'; //REMOVE THIS LINE
$response['message'] = '<div class="alert alert-warning"><strong>File Already Exists </div>';
//echo json_encode($response); //REMOVE THIS LINE
$uploadOk = 0;
}
// Check file size
if ($fileSize > 704857600) {
//$response['type'] = 'error'; //REMOVE THIS LINE
$response['message'] = '<div class="alert alert-warning"> File Size must be less than 700MB.</div>';
//echo json_encode($response); //REMOVE THIS LINE
$uploadOk = 0;
}
// Allow certain file formats
if($extension != "png" && $extension != "mp4" && $extension != "docx" && $extension != "pdf" && $extension != "jpg") {
//$response['type'] = 'error'; //REMOVE THIS LINE
$response['message'] = '<div class="alert alert-warning"> File Extention must be jpg ,jpeg or png type.</div>';
//echo json_encode($response); //REMOVE THIS LINE
$uploadOk = 0;
}
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
$response['type'] = 'error';
// CONCATENATE THE ERROR MESSAGE
$response['message'] = $response['message'] . '<div class="alert alert-warning"> Sorry, your file was not uploaded.</div>';
echo json_encode($response);
$uploadOk = 0;
// if everything is ok, try to upload file
}