處理從單個輸入元素通過POST上傳的多個文件

Question

我正在編寫圖像上傳程序，並使其與單個文件完美協作，但是當我嘗試處理多個文件時，似乎沒有任何東西正在通過。我有一個HTML元素接受多個文件：

<input type="file" id="entryPhotos" multiple> 

，然後建立我FormData：

var formData = new FormData(); 
var entryArray = new Array("entryName","entryFoodType","entryROI","entryOpeningHour","entryOpeningMinute","entryOpeningAMPM","entryClosingHour","entryClosingMinute","entryClosingAMPM","entryPhone","entryEmail","entryPhotos","entryDesc","entryLocLat","entryLocLong"); 
for(var temp = 0; temp < entryArray.length; temp++){ 
    //--I suspect my problem is here 
    if($('#' + entryArray[temp])[0].files){ 
     formData.append(entryArray[temp], $('#' + entryArray[temp])[0].files); 
    } 
    else{ 
     formData.append(entryArray[temp], $('#' + entryArray[temp]).val()); 
    } 
} 

在使用jQuery.ajax之後送過來：

$.ajax({ 
    url: '/scripts/spotEntry.php', 
    data: formData, 
    type: 'POST', 
    contentType: false, 
    processData: false, 
    success: function(returnCode){ 
     entryReturnProc(returnCode); 
    } 
}); 

但當它到達服務器時什麼都沒有：

echo count($_FILES["entryPhotos"]["name"]); //returns 0 

如果我只是做一個單一的形象，我可以做$('#' + entryArray[temp])[0].files[0]，它會正常工作，但我不應該然後能夠刪除[0]並讓它發送數組，我的理解，FormData jQuery.ajax和PHP的所有支持？

Answer 1

爲別人誰可能有這個問題。經過一番詳細的搜索，我發現這裏的答案：uploading-multiple-files-using-formdata

我不得不修改我的formData.append命令一點點，遍歷數組，而不是僅僅通過整個事情：

var entryArray = new Array("entryName","entryFoodType","entryROI","entryOpeningHour","entryOpeningMinute","entryOpeningAMPM","entryClosingHour","entryClosingMinute","entryClosingAMPM","entryPhone","entryEmail","entryPhotos","entryDesc","entryLocLat","entryLocLong"); 
for(var temp = 0; temp < entryArray.length; temp++){ 
    if($('#' + entryArray[temp])[0].files){ 
     for (var i = 0; i < $('#' + entryArray[temp])[0].files.length; i++) { 
      formData.append(entryArray[temp] + "[]", $('#' + entryArray[temp])[0].files[i]); 
     } 
    } 
    else{ 
     formData.append(entryArray[temp], $('#' + entryArray[temp]).val()); 
    } 
} 

而完成的緣故如果它可以幫助一個人在未來，在服務器上的PHP程序：

for($i = 0; $i < count($_FILES["entryPhotos"]["name"]); $i++){ 
     $tmp_name = $_FILES["entryPhotos"]["tmp_name"][$i]; 
     if (!$tmp_name) continue; 

     $name = basename($_FILES["entryPhotos"]["name"][$i]); 

    if ($_FILES["entryPhotos"]["error"][$i] == UPLOAD_ERR_OK) 
    { 
     if (move_uploaded_file($tmp_name, $uploaddir.$name)){ 
      echo 'us'; 
     } 
     else{ 
      echo 'uf'; 
     } 
    } 
    else{ 
     echo 'uf'; 
    } 
} 

編輯/注：此上傳腳本是相當粗糙的，並且具有一定的安全隱患。上傳文件時請始終牢記：永遠不要相信用戶上傳的內容是安全的。始終以最佳方式清理上傳內容。這個片段中沒有顯示的一件事是文件保存在webroot後面的文件夾中。這有助於防止潛在黑客從他們可能上傳的腳本訪問。

還建議將文件的名稱全部更改爲隨機和唯一的，並同時檢查文件擴展名。一些服務器被設置爲允許多個擴展名，這可以給一個開放。有幾種方法我在網上找到這些東西，然後把它們混合在一起，這就是我想出的：

爲了得到一個隨機和唯一的名字，我使用了$prefix = str_replace(array('.', ' '), '' , microtime());，它以微秒爲單位提取當前的Unix時間，因此給出了一個潛在的黑客無法預測的數字，然後爲了確保唯一性，因爲我循環了多個文件，我將循環的索引添加到了前綴的末尾。

然後我拉了基本名稱的擴展名。我使用strstr(basename($name), '.')而不是使用典型的pathinfo()來拉延伸。我發現這樣做的好處是，它將拉取所有文件擴展名，而不僅僅是最後一個。然後我檢查一下接受的擴展名列表。如果通過，則可以將其上傳到webroot之前的目錄。這種固有需要的額外步驟是，如果文件具有多個擴展名，它會自動跳過，從而避免可能存在的安全風險。

最後一點需要注意的是，我沒有使用一些「衛生」技術，例如檢查圖像大小並檢查MIME類型以驗證文件是否爲圖像。實際圖像（因此返回文件大小）可能包含惡意代碼，並且MIME類型由客戶端發送，因此可能是僞造的。這些對我來說似乎沒有實際的好處，所以我沒有使用它們，但有些人可能會爭辯說，沒有這樣的東西太安全，而且還有更多的措施可以採取。在以任何方式處理用戶輸入時，您應始終儘可能多地進行調查，並採取適當的預防措施以確保您，您的數據和用戶受到保護。

Answer 2

我相信你需要PHP的$ _FILES變量。

<form method="post" action="upload-page.php" enctype="multipart/form-data"> 
    <input name="filesToUpload[]" id="filesToUpload" type="file" multiple="" /> 
</form> 

if(count($_FILES['uploads']['filesToUpload'])) { 
    foreach ($_FILES['uploads']['filesToUpload'] as $file) { 

     //do your upload stuff here 
     echo $file; 

    } 
} 

使用JavaScript這樣做會是這樣的：

//get the input and UL list 
var input = document.getElementById('filesToUpload'); 
var list = document.getElementById('fileList'); 

//empty list for now... 
while (list.hasChildNodes()) { 
    list.removeChild(ul.firstChild); 
} 

//for every file... 
for (var x = 0; x < input.files.length; x++) { 
    //add to list 
    var li = document.createElement('li'); 
    li.innerHTML = 'File ' + (x + 1) + ': ' + input.files[x].name; 
    list.append(li); 
}