Question

这是我上传excel文件并将其中的数据导入mysql表的页面。由于查询需要一些时间才能完成，我想显示一个显示“加载”的GIF文件，直到插入整个记录，然后将图像更改为已完成。任何工作请。

<?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>

Answer 1

您已经使用过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>

Answer 2

使用AJAX

使用AJAX将所有处理发送到另一个页面。

在Java脚本中，在你的statechange（你收到ajax响应）

    function stateChanged1(){
            var zdivid="divid";

            if( xmlHttp.readyState!=3){
                    //SHOW YOUR GIF -- That's it
            }

            if ( xmlHttp.readyState==4 || xmlHttp.readyState=="complete" )
            {
                    document.getElementById(zdivid).innerHTML=xmlHttp.responseText;
            }
    }

使用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);}
    });

Answer 3

我使用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>

在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";
}
?>

显示消息，直到PHP脚本完成

3 个答案: