带有进度栏的PHP多文件上传无法使用JSON和Javascript正常工作 [英] PHP Multiple File Upload with Progress Bar Not Working using JSON and Javascript
问题描述
我的网站"包含3个部分:HTML表单，PHP文件上传脚本和Javascript.我在这里遵循了本教程: http://www.w3bees.com/2013/12/multiple-file-upload-with-progress-bar.html?showComment=1391833500872#c6704017175905292593
My Site contains 3 parts: HTML form, PHP File Upload Script, and the Javascript. I followed this tutorial here: http://www.w3bees.com/2013/12/multiple-file-upload-with-progress-bar.html?showComment=1391833500872#c6704017175905292593
文件上传部分效果很好(PHP可以毫无问题地上传任何文件)，但是进度条不会改变，它始终保持为0％.
The file upload portion works great (PHP will upload any files with no problem), however the progress bar does not change, it stays at 0% the whole time.
这是我的整个index.php，底部靠近HTML表单:
Here is my entire index.php with HTML form near the bottom:
<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">
© 2014 Rye High Group. All rights reserved.</a>
</footer>
这是我的PHP上传脚本:
Here is my PHP Upload Script:
<?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是我的代码):
AND Finally my upload.js (the rest uses Jquery however upload.js is my code):
$(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();
}
});
});
推荐答案
对不起，这个问题很小.在检查了chrome中的DOM之后，我发现加载javascript时出现语法错误.我收到未捕获的ReferenceError:未定义$"错误.
Sorry guys, the issue was a super small one. After inspecting the DOM in chrome I found out that there was a syntax error loading the javascript. I was getting a "Uncaught ReferenceError: $ is not defined" error.
无论如何这是错误:
<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>
很抱歉浪费您的时间，那是我的坏事.
Sorry for wasting your time, that was my bad.
这篇关于带有进度栏的PHP多文件上传无法使用JSON和Javascript正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
