Fatal编程技术网
  • javascript/
  • 使用JSON和Javascript时，带有进度条的PHP多文件上载不起作用

使用JSON和Javascript时，带有进度条的PHP多文件上载不起作用

javascript php jquery html json

使用JSON和Javascript时，带有进度条的PHP多文件上载不起作用,javascript,php,jquery,html,json,Javascript,Php,Jquery,Html,Json,我的网站包含3个部分：HTML表单、PHP文件上传脚本和Javascript。我在这里学习了本教程： 文件上传部分工作得很好（PHP将上传任何文件，没有问题），但是进度条没有改变，它始终保持在0% 下面是我的整个index.php，底部有HTML表单： <head> <style type="text/css" media="screen"> div#banner_left { position: absolute; top: 0%;

我的网站包含3个部分：HTML表单、PHP文件上传脚本和Javascript。我在这里学习了本教程：

文件上传部分工作得很好（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>
看看这个

这就是他所做的

            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

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

无论如何，这就是错误：

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



你有完整百分比的数字吗？没有。我什么也没得到我查看了你的回复。完整的功能正按预期完美运行。

            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!');
            } 



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