如何在文件上传时显示进度条

时间:2016-03-17 06:57:25

标签: php jquery

我正在使用 PHPExcel 来读取大型Excel文件并将记录插入数据库。我想要以下内容:

  1. 显示从Excel中读取数据时完成百分比的进度文胸
  2. 在将行插入/保存到数据库时显示另一个进度条。
  3. 但我不知道如何才能实现这一进步吧。能否请您给我一个明确的指导,或者如果您在线了解任何教程,请参考。这是我到目前为止的代码:

    if(isset($_POST["submit"]))
    {   
    $objPHPExcel = PHPExcel_IOFactory::load($_FILES['valuation_roll']['tmp_name']);
    $sql = "INSERT INTO roll (year_id, reg_division, farm_number, farm_name, usv, extent, owner_id, position, rate, tax_payable, owner_name, identification_no, address1, nationality) VALUES ";
    
    foreach ($objPHPExcel->getWorksheetIterator() as $worksheet) {
        $worksheetTitle     = $worksheet->getTitle();
        $highestRow         = $worksheet->getHighestRow(); // e.g. 10
        $highestColumn      = $worksheet->getHighestColumn(); // e.g 'F'
        $highestColumnIndex = PHPExcel_Cell::columnIndexFromString($highestColumn);
        $nrColumns = ord($highestColumn) - 64;
    
        for ($row = 1; $row <= $highestRow; ++ $row) {
            $sql .= "(";
            $values = "";
            $values .= $_POST["year_id"].", ";
            for ($col = 0; $col < $highestColumnIndex; ++ $col) {
                $cell = $worksheet->getCellByColumnAndRow($col, $row);
                $val = $cell->getValue();
                $values = $val.", ";
            }
            $values = substr($values, 0, -1);
            $sql .= "),";
        }
    }
    $sql = substr($sql, -1);
    echo $sql;
    }
    

    现在我只打印出SQL语句。我想编写一个性能良好的代码,以避免内存泄漏等等。

    JavaScript的:

      $(function() {
    $('form').on('submit', upload_roll);
    
    // Catch the form submit and upload the files
    function upload_roll(event)
    {
      event.stopPropagation(); // Stop stuff happening
      event.preventDefault(); // Totally stop stuff happening
    
      // START A LOADING SPINNER HERE
    
      // Create a formdata object and add the files
      var data = new FormData();
      data.append('file', $('input[type=file]')[0].files[0]);
      $("#progress-bar").addClass("active");
      var progressbar = $( "#progress-bar" ),
          progressLabel = $( "#update" );
      $.ajax({
          url: 'ajax.load.php?year='+$("[name=year_id]").val(),
          type: 'POST',
          data: data,
          contentType: false,
          cache: false,
          processData: false, // Don't process the files
          contentType: false, // Set content type to false as jQuery will tell the server its a query string request
          success: function(data)
          {
             progressbar.progressbar({
               value: false,
               change: function() {
    
                 var ajax_progress = data.split("|");
                 var percentage = (ajax_progress[1] / ajax_progress[2]) * 100
                 $("#progress-bar").css('width', percentage+"%")
                 progressLabel.text(progressbar.progressbar(ajax_progress[0]));
    
               },
               complete: function() {
                 progressLabel.text(ajax_progress[0]);
             }
          });
        }
      });
    

    }   });

    HTML

    <div class="progress">
       <div class="progress-bar progress-bar-striped" id="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">
        </div>
    </div>
    <span id="update"></span>
    

0 个答案:

没有答案