使用PHP和HTML進行多個文件上傳並帶進度條

Question

我最近創建了一個腳本，允許用戶使用PHP後端和HTML表單上傳多個文件。我想實現一個進度欄，以便用戶在上傳多個文件時不要點擊上傳按鈕兩次。如果可能，我想避免使用javascript或ajax，但同時我希望跨瀏覽器兼容性。

這裏是我的HTML表單數據：

<form enctype="multipart/form-data" action="uploader.php" method="POST"> 
Choose Course Code: 
<select name="subject_list"> 
<option value="ACC 100">ACC 100</option> 
<option value="ACC 406">ACC 406</option> 
<option value="ECN 104">ECN 104</option> 
<option value="ECN 204">ECN 204</option> 
<option value="FIN 300">FIN 300</option> 
<option value="GMS 200">GMS 200</option> 
<option value="ITM 100">ITM 100</option> 
<option value="ITM 301">ITM 301</option> 
<option value="ITM 305">ITM 305</option> 
<option value="ITM 330">ITM 330</option> 
<option value="ITM 350">ITM 350</option> 
<option value="ITM 407">ITM 407</option> 
<option value="ITM 500">ITM 500</option> 
<option value="ITM 501">ITM 501</option> 
<option value="ITM 505">ITM 505</option> 
<option value="ITM 600">ITM 600</option> 
<option value="LAW 122">LAW 122</option> 
<option value="SSH 105">SSH 105</option> 
<option value="Other">Other</option> 
</select><br> 
Choose a file to upload (Max 500MB): <input name="rye_file[]" type="file" id="file_style" multiple /> 
<input type="submit" name="submit" value="Upload" /> 
</form> 
<form action="/logout.php"> 
<input type="submit" value="Logout"> 
</form> 

，這裏是我的後端：

<?php 
$subject_list = $_POST['subject_list']; 
$uploaddir = "/var/www/fixnode_website/content/Secure Login/Rye High/uploads/$subject_list"; 
$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($move_file){ 
    echo "File is valid, and was successfully uploaded to: $subject_list folder. Please wait, your browser will refresh in 5-10 seconds!"; 
    header('Refresh: 10; URL=/index.php'); 
    } 
    else { 
    echo "Upload failed"; 
} 
?> 

Answer 1

它可能不是你想要的，但我建議你嘗試

1. uploadify http://www.uploadify.com [免費]，還有一個html5 版本。有時候，我儘量不要重新發明輪子。
2. 如果你擔心費用uploadify，怎麼樣blueimp http://blueimp.github.com/jQuery-File-Upload/
3. 像HTML5這麼多，儘量 http://www.igloolab.com/jquery-html5-uploader/（你會付這其中一個分享Tweet或Facebook的職位。多麼偉大的是什麼？ ）
4. 其他幾個選項： http://www.fyneworks.com/jquery/multiple-file-upload/
5. Valums：適用於$ 15一次性付款）https://github.com/valums/file-uploader（fine_uploader - 是有道理的。

請注意，如果你沒有問題，你將不得不使用Jquery。