帶進度條的PHP和HTML多文件上傳

我有一個網站，允許使用HTML5多種設置上傳多個文件。我使用PHP腳本來驗證文件並上傳它們。僅使用PHP和HTML/CSS我想爲正在上傳的文件（或文件）創建一個進度條。我怎樣才能做到這一點？我知道PHP可以使用APC獲取文件上傳信息，但是如何合併多個文件上傳？帶進度條的PHP和HTML多文件上傳

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

來源

2014-02-07 fixnode

這裏是一個jQuery插件，支持多文件上傳和progressbars你可能會發現它有用。 http://www.dropzonejs.com/ –

我不認爲沒有JavaScript就沒有這種可能。你需要操縱你的DOM而不刷新頁面（IE取消文件上傳） –

進度條需要JS。另一個插件，你可以使用：http://blueimp.github.io/jQuery-File-Upload/ – AzDesign

如果您使用javascript來解決問題，您可以節省很多努力！下是鏈接到一個教程，也許從這一個最好的，並在谷歌搜索它。

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

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

來源

2014-02-07 08:05:28 simonkaspers1

我試圖實現您建議的頂級鏈接。我打開了一個新的問題，因爲它與JSON實現有關。無論如何感謝您的鏈接 – fixnode

頂部鏈接現在工作很好，輕微的JavaScript錯誤已修復。再次感謝！ – fixnode

嗨simonkaspers1，我怎麼能從第一個鏈接中的數據在html中發送到MySQL中，我只需要在一個簡單的

帶進度條的PHP和HTML多文件上傳

回答

相關問題