Javascript 显示消息直到php脚本完成
这是我上传excel文件并将其中的数据导入mysql表的页面。由于查询需要一点时间才能完成，我想显示一个显示“加载”的GIF文件，直到插入整个记录，然后将图像更改为“已完成”。有什么工作吗Javascript 显示消息直到php脚本完成,javascript,php,mysql,Javascript,Php,Mysql,这是我上传excel文件并将其中的数据导入mysql表的页面。由于查询需要一点时间才能完成，我想显示一个显示“加载”的GIF文件，直到插入整个记录，然后将图像更改为“已完成”。有什么工作吗 <?php require_once('Connections/met.php'); $uploadedStatus = 0; if ( isset($_POST["submit"]) ) { if ( isset($_FILES["file"])) { //if t
<?php
require_once('Connections/met.php');
$uploadedStatus = 0;
if ( isset($_POST["submit"]) ) {
if ( isset($_FILES["file"])) {
//if there was an error uploading the file
if ($_FILES["file"]["error"] > 0) {
echo "Return Code: " . $_FILES["file"]["error"] . "<br />";
}
else {
if (file_exists($_FILES["file"]["name"])) {
unlink($_FILES["file"]["name"]);
}
$storagename = "windrose_data.xlsx";
move_uploaded_file($_FILES["file"]["tmp_name"], $storagename);
$uploadedStatus = 1;
}
} else {
echo "No file selected <br />";
}
}
if($uploadedStatus==1){
$db=mysql_select_db($database_met,$met);
set_include_path(get_include_path() . PATH_SEPARATOR . 'Classes/');
include 'PHPExcel/IOFactory.php';
// This is the file path to be uploaded.
$inputFileName = 'windrose_data.xlsx';
try {
$objPHPExcel = PHPExcel_IOFactory::load($inputFileName);
} catch(Exception $e) {
die('Error loading file "'.pathinfo($inputFileName,PATHINFO_BASENAME).'": '.$e->getMessage());
}
$allDataInSheet = $objPHPExcel->getActiveSheet()->toArray(null,true,true,true);
$arrayCount = count($allDataInSheet); // Here get total count of row in that Excel sheet
for($i=2;$i<=$arrayCount;$i++){
$date = trim($allDataInSheet[$i]["A"]);
$time = trim($allDataInSheet[$i]["B"]);
$dir = trim($allDataInSheet[$i]["C"]);
$spd = trim($allDataInSheet[$i]["D"]);
$insertTable= mysql_query("insert into wr_copy (date,time,dir,spd) values('$date', '$time',$dir,$spd)") or die(mysql_error());
$msg = 'Record has been added. <div style="Padding:20px 0 0 0;"><a href="">Go Back to tutorial</a></div>';
}
echo "<div style='font: bold 18px arial,verdana;padding: 45px 0 0 500px;'>".$msg."</div>";
}
?>
<html>
<head>
<title>Import Excel file </title>
<script type="text/javascript" src="js/jquery-1.5.1.js"></script>
<script type="text/javascript" src="js/jquery-ui/js/jquery-ui-1.10.2.custom.js"></script>
<script type="text/javascript" src="js/jquery-ui/js/jquery-ui-1.10.2.custom.min.j"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>
</head>
<body>
<table width="600" style="margin:115px auto; background:#f8f8f8; border:1px solid #eee; padding:10px;">
<form action="<?php echo $_SERVER["PHP_SELF"]; ?>" method="post" enctype="multipart/form-data">
<tr>
<td width="50%" style="font:bold 12px tahoma, arial, sans-serif; text-align:right; border-bottom:1px solid #eee; padding:5px 10px 5px 0px; border-right:1px solid #eee;">Select file</td>
<td width="50%" style="border-bottom:1px solid #eee; padding:5px;"><input type="file" name="file" id="file" /></td>
</tr>
<tr>
<td style="font:bold 12px tahoma, arial, sans-serif; text-align:right; padding:5px 10px 5px 0px; border-right:1px solid #eee;">Submit</td>
<td width="50%" style=" padding:5px;"><input type="submit" name="submit" /></td>
</tr>
</table>
</form>
</body>
</html>
您使用了jQuery，但似乎没有使用jQuery ajax/post方法来提交表单，这将是实现此目的的理想方式。现在的一个快速方法是将onsubmit事件hadaller添加到表单中，并在表单提交事件上显示加载图像/消息
<form action="<?php echo $_SERVER["PHP_SELF"]; ?>" method="post" enctype="multipart/form-data" onsubmit="$('#loading').show(); return true;">
<div id='loading' style='display:none'> Loading message / Image Here...</div>
使用AJAX
使用AJAX将所有处理发送到另一个页面
在Java脚本中，
在statechange中（接收ajax响应）
使用Jquery
$.ajax({
type:"POST",
url://your ajax url,
data:'',
contentType:"application/json;charset=utf-8",
beforeSend: function ( xhr ) {
//SHOW YOUR GIF -- That's it
},
success :function (data)
{
alert (data);
//do whatever you want, after successful processing
},
error:function(request,status,error)
{alert(error);}
});
我用ajaxupload库解决了这个问题。下面的脚本将完成这项工作
<script type="text/javascript" src="js/ajaxupload.3.5.js" ></script>
<script>
$(function(){
var btnUpload=$('#upload');
var status=$('#status');
new AjaxUpload(btnUpload, {
action: 'upload-file.php',
name: 'uploadfile',
onSubmit: function(file, ext){
if (! (ext && /^(xls|xlsx)$/.test(ext))){
// extension is not allowed
status.text('Only xls, xlsx files are allowed');
return false;
}
status.text('Uploading...');
},
onComplete: function(file, response){
//On completion clear the status
status.text('');
//Add uploaded file to list
$('<li></li>').appendTo('#files').html(response).addClass('success');
}
});
});</script>
$（函数（）{
var btnUpload=$（'上传'）；
变量状态=$（“#状态”）；
新AjaxUpload（btnUpload{
操作：“upload file.php”，
名称：“上载文件”，
onSubmit：函数（文件，ext）{
如果（！（ext&&/^（xls | xlsx）$/.test（ext））{
//不允许扩展
text（“仅允许xls、xlsx文件”）；
返回false；
}
status.text（'上传…'）；
},
onComplete：函数（文件、响应）{
//完成后清除状态
状态。文本（“”）；
//将上载的文件添加到列表
$（'）.appendTo（'#files'）.html（response.addClass（'success'）；
}
});
});
在upload_file.php中，有以下行
<?php
$uploaddir = './uploads/';
$file = $uploaddir . basename($_FILES['uploadfile']['name']);
if (move_uploaded_file($_FILES['uploadfile']['tmp_name'], $file)) {
echo "success";
} else {
echo "error";
}
?>
单靠服务器端脚本编写是不可能复制的。您总是需要一些客户端脚本，所以javascript。存在两种方法：1。定期轮询是否成功，以监视服务器端进程进度和2。将基于html表单的上传替换为提供进度反馈的ajax替代方案。在我看来，您可以将ajax发送到PHP页面并显示加载GIF，直到将响应发送回客户端。我知道如何使用jquery处理正常的post请求。由于这涉及到文件上传，我不知道如何处理。在整个代码中，文件上传不需要花费太多时间。但是查询需要更多的时间，因为它是另一台服务器。在使用jquery上传文件时，我遇到了麻烦
<?php
$uploaddir = './uploads/';
$file = $uploaddir . basename($_FILES['uploadfile']['name']);
if (move_uploaded_file($_FILES['uploadfile']['tmp_name'], $file)) {
echo "success";
} else {
echo "error";
}
?>