-1
我有一個帶有文件上傳和進度條的窗體。我使用Ajax提交表單。如果成功，但工作頁面中的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代碼：
<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;
}
?>
你需要聲明一個清晰的問題。 –
你的代碼很難閱讀，因爲格式不好，沒有壓縮 – RamRaider
我很抱歉。如果處理頁面ajax中的多個錯誤不是響應，但任何單個錯誤或成功都可以正常工作 –