【问题标题】:PHP and HTML multi file upload with progress bar带进度条的 PHP 和 HTML 多文件上传
【发布时间】:2014-02-07 07:54:19
【问题描述】:

我有一个网站,允许使用 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>

感谢您的帮助,

附:我宁愿避免使用 javascript,因为我不太熟悉它。首选 PHP 和 HTML/HTML5。

【问题讨论】:

  • 这是一个支持多文件上传和进度条的 Jquery 插件,您可能会发现它很有帮助。 dropzonejs.com
  • 我认为如果没有 JavaScript,这是不可能的。您需要在不刷新页面的情况下操作您的 DOM(IE 取消文件上传)
  • 进度条需要JS。您可以使用的另一个插件:blueimp.github.io/jQuery-File-Upload

标签: php css html apc


【解决方案1】:

如果您使用 javascript 来解决问题,您会省去很多麻烦!下面是一个教程的链接,也许可以从中获得最好的,并在谷歌上搜索它。

http://www.w3bees.com/2013/10/file-upload-with-progress-bar.html

http://hayageek.com/jquery-multiple-file-upload/

【讨论】:

  • 我正在尝试实现您建议的顶部链接。我提出了一个新问题,因为它与 JSON 实现有关。无论如何感谢您的链接
  • 顶部链接现在很好用,修复了轻微的 javascript 错误。再次感谢!
  • 嘿 simonkaspers1,我如何从第一个链接中获取 html 中的数据以发送到 mysql,我只需要在一个简单的
    中使用 value=filename 设置在隐藏输入中的文件名?
猜你喜欢
  • 2013-02-15
  • 2012-09-24
  • 2015-10-19
  • 1970-01-01
  • 2013-05-21
  • 2011-09-11
  • 2011-10-07
  • 2011-06-01
  • 1970-01-01
相关资源
最近更新 更多