带进度条的 PHP 和 HTML 多文件上传
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21622194/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
PHP and HTML multi file upload with progress bar
提问by fixnode
I have a website that allows multiple files to be uploaded using HTML5 multiple setting. I use a PHP script to validate the files and upload them. Using only PHP and HTML/CSS I would like to create a progress bar for the file (or files) being uploaded. How can I achieve this? I know PHP can use APC to get file upload info, but how can that be incorporated for multiple files being uploaded?
我有一个允许使用 HTML5 多重设置上传多个文件的网站。我使用 PHP 脚本来验证文件并上传它们。仅使用 PHP 和 HTML/CSS，我想为正在上传的文件（或多个文件）创建一个进度条。我怎样才能做到这一点？我知道 PHP 可以使用 APC 来获取文件上传信息，但是如何将其合并到正在上传的多个文件中？
<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">
</head>
<?php
echo "<div id='banner_right'>Welcome ";
echo $_SESSION['myusername'];
echo "<br><form action='/logout.php'>";
echo " <input type='submit' value='Logout' style='width:216px; font-size: 15px;'>";
echo "</form>";
echo "</div><br><br>";
?>
<!-- FILE UPLOAD SCRIPT//-->
<?php
if(isset($_POST['submit']))
{
$subject_list = $_POST['subject_list'];
$document_type = $_POST['document_type'];
$uploaddir = "/var/www/rye-high-website/Rye High/uploads/$subject_list/$document_type";
$files=array();
$fdata=$_FILES['rye_file'];
if(is_array($fdata['name'])){
for($i=0;$i<count($fdata['name']);++$i){
$files[]=array(
'name' => $fdata['name'][$i],
'tmp_name' => $fdata['tmp_name'][$i],
);
}
}
else $files[]=$fdata;
foreach ($files as $file) {
// uploaded location of file is $file['tmp_name']
// original filename of file is $file['name']
$move_file = move_uploaded_file($file['tmp_name'], "$uploaddir/".$file['name']);
}
if ($subject_list == "None") {
echo '<br><div class="alert">Please Pick A Course Code</div>';
}
if ($document_type == "None"){
echo '<br><div class="alert">Please Pick A Document Type</div>';
}
if($move_file){
echo '<br><div class="info">File is valid, and was successfully uploaded to: $subject_list folder</div>';
}
else {
echo '<br><div class="alert">Upload Failed</div>';
echo $move_file;
}
}
?>
<!-- CONTINUE WITH HTTP FORM//-->
<body>
<div id="banner_left">
<img src="/Rye High/images & scripts/logo_ryerson.gif"/>
</div>
<br><br><div class="img">
<img src="/images/logo.png" />
</div><center>
<form enctype="multipart/form-data" action="<?php echo htmlentities($_SERVER['REQUEST_URI']); ?>" method="POST">
Choose Document Type:
<select name="document_type">
<option value="None">Pick Document Type</option>
<option value="Textbooks">Text Books</option>
<option value="Notes & Assignments">Assignment/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>
</select><br>
Choose file(s) to upload (Max 500MB): <input name="rye_file[]" type="file" id="multiple" multiple />
<input type="submit" name="submit" value="Upload" />
</form>
I appreciate your help,
我感谢您的帮助，
P.S. I would prefer to avoid using javascript since I'm not familiar with it well enough. PHP and HTML/HTML5 preferred.
PS 我宁愿避免使用 javascript，因为我对它不够熟悉。首选 PHP 和 HTML/HTML5。
回答by simonkaspers1
You save yourself a lot of struggle if you use javascript to solve the issue! Under is a link to a tutorial, maybe take the best from that one, and search for it on google.
如果您使用 javascript 来解决问题，您可以省去很多麻烦！下面是一个教程的链接，也许从那个教程中获取最好的，然后在谷歌上搜索。
http://www.w3bees.com/2013/10/file-upload-with-progress-bar.html
http://www.w3bees.com/2013/10/file-upload-with-progress-bar.html
