带有进度条的 PHP 多文件上传无法使用 JSON 和 Javascript答案

【问题标题】：PHP Multiple File Upload with Progress Bar Not Working using JSON and Javascript带有进度条的 PHP 多文件上传无法使用 JSON 和 Javascript
【发布时间】：2014-02-08 04:45:49
【问题描述】：

我的网站包含 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));

}
?>

最后是我的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();
    }

  });
});

【问题讨论】：

你得到百分比完成的数字吗？
不，我没有。我什么都没得到
我检查了你的回复。完整的功能按预期完美运行。

标签： javascript php jquery html json

【解决方案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

【讨论】：

【解决方案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>

抱歉浪费了你的时间，那是我的错。

【讨论】：