Question

我的网站包含3个部分：HTML表单，PHP文件上载脚本和Javascript。我在这里遵循了这个教程：http://www.w3bees.com/2013/12/multiple-file-upload-with-progress-bar.html?showComment=1391833500872#c6704017175905292593

文件上传部分效果很好（PHP会上传任何文件没有问题），但进度条不会改变，它一直保持在0％。

这是我的整个index.php，底部附近有HTML表单：

<head>
<style type="text/css" media="screen">
     div#banner_left {
       position: absolute;
       top: 0%;
       left: 0%;
       width: auto;
     }
     div#banner_right {
       float: right;
       width: auto;
     }
    </style>
<link rel="stylesheet" type="text/css" href="/css/structure.css">
<link rel="stylesheet" type="text/css" href="/css/pure-min.css"
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.form.min.js"></script>
<script type="text/javascript" src="js/uploader.js"></script>
</head>
<body>
<div id="banner_left">
<img src="js/logo_ryerson.gif"/>
</div>
<br><br><div class="img">
<img src="/images/logo.png" />
</div><center><br><br>
<div class="status"></div>
<form enctype="multipart/form-data" action="upload.php" method="POST">
Choose Document Type:
<select name="document_type">
<option value="None">Pick Document Type</option>
<option value="Textbooks">Notes</option>
</select><br>
Choose Course Code:
<select name="subject_list">
<option value="None">Pick Course</option>
<option value="ACC 100">ACC 100</option>
<option value="ACC 406">ACC 406</option>
<option value="Other">Other</option>
</select><br>
Choose file(s) to upload (Max 500MB): <input name="files[]" type="file" id="files" multiple="multiple" />
<input type="submit" name="submit" value="Upload" />
</form><br>
<div class="progress">
        <div class="bar"></div >
        <div class="percent">0%</div >
</div>
<footer id="main">
  &copy; 2014 Rye High Group.  All rights reserved.</a>
</footer>

这是我的PHP上传脚本：

<?php
$subject_list = $_POST['subject_list'];
$document_type = $_POST['document_type'];
$dir = "/var/www/testsite/uploads/$subject_list/$document_type/";
$count = 0;

if ($_SERVER['REQUEST_METHOD'] == 'POST' and isset($_FILES['files']))
{
  // loop all files
  foreach ( $_FILES['files']['name'] as $i => $name )
  {
    // if file not uploaded then skip it
    if ( !is_uploaded_file($_FILES['files']['tmp_name'][$i]) )
      continue;

    // now we can move uploaded files
      if( move_uploaded_file($_FILES["files"]["tmp_name"][$i], $dir . $name) )
        $count++;
  }

  echo json_encode(array('count' => $count));

}
?>

AND最后我的upload.js（其余的使用Jquery，但upload.js是我的代码）：

$(function() {
  /* variables */
  var status = $('.status');
  var percent = $('.percent');
  var bar = $('.bar');

  /* submit form with ajax request using jQuery.form plugin */
  $('form').ajaxForm({

    /* set data type json */
    dataType:'json',

    /* reset before submitting */
    beforeSend: function() {
      status.fadeOut();
      bar.width('0%');
      percent.html('0%');
    },

    /* progress bar call back*/
    uploadProgress: function(event, position, total, percentComplete) {
      var pVel = percentComplete + '%';
      bar.width(pVel);
      percent.html(pVel);
    },

    /* complete call back */
    complete: function(data) {
      status.html(data.responseJSON.count + ' Files uploaded!').fadeIn();
    }

  });
});

Answer 1

检查一下。

jQuery forms Upload Progress

这就是他所做的。

            uploadProgress: function(event, position, total, percentComplete) {
                var percentVal = percentComplete + '%';
                bar.width(percentVal)
                percent.html(percentVal);
            },
            complete: function(xhr) {
                var percentVal = '100%';
                bar.width(percentVal)
                percent.html(percentVal);
                status.html('Thank You Upload Complete!');
            }

信用不是我的：D

Answer 2

对不起，伙计们，问题是一个非常小的问题。在检查chrome中的DOM后，我发现加载javascript时出现语法错误。我得到了一个“未捕获的ReferenceError：$未定义”错误。

无论如何这是错误：

<link rel="stylesheet" type="text/css" href="/css/structure.css">
<link rel="stylesheet" type="text/css" href="/css/pure-min.css"
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.form.min.js"></script>
<script type="text/javascript" src="js/uploader.js"></script>

应该是这样的：

<link rel="stylesheet" type="text/css" href="/css/structure.css">
<link rel="stylesheet" type="text/css" href="/css/pure-min.css"> <-- FORGOT TO CLOSE! :| 
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.form.min.js"></script>
<script type="text/javascript" src="js/uploader.js"></script>

抱歉浪费你的时间，这是我的坏事。

使用进度条的PHP多文件上载不使用JSON和Javascript

2 个答案: