POSTを通じてアップロードされた複数のファイルを1つの入力要素から処理する

Question

イメージアップロードプログラムを作成していて、1つのファイルで完全に動作させていますが、複数のファイルを処理しようとすると、それはそれを介して送信するためにjQuery.ajaxを使用した後

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()); 
    } 
} 

：

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

、その後、私のFormDataを構築：私は、単一のHTML要素に複数のファイルを受け入れるようにしてい

$.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 

私はただ1つのイメージをやっているだけで、$('#' + 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'; 
    } 
} 

EDIT /注：このアップロードスクリプトは、むしろ、粗で、特定のセキュリティ上のリスクがあります。ファイルをアップロードするときは常に注意してください：アップロードしているものを信用しないでください。あなたができる限りあなたのアップロードを常に衛生的にする。このスニペットに表示されていないことの1つは、ファイルがWebルートの背後にあるフォルダに保持されていることです。これにより、潜在的なハッカーがアップロードするスクリプトからのアクセスを防ぐことができます。

また、ファイルの名前をランダムかつユニークなものに変更すると同時に、ファイルの拡張子を確認することをお勧めします。いくつかのサーバーは複数の拡張を許可するように設定されており、これによりオープンが得られます。

ランダムでユニークな名前を取得するために、私は$prefix = str_replace(array('.', ' '), '' , microtime());を使用して現在のUnix時間をマイクロ秒単位で取得していますが、したがって、複数のファイルをループしているために、プレフィックスの最後にループのインデックスを追加したため、潜在的なハッカーが簡単に予測できないほどの数を与えてから、一意性を確保するのに役立ちます。

次に、ベースネームの拡張子を引っ張った。拡張子を引き出すために典型的なpathinfo()を使用する代わりに、strstr(basename($name), '.')を使用しました。私がこれで見つけ出す利点は、最後のファイル拡張子だけでなく、すべてのファイル拡張子を引き出すことです。それから私は受け入れられた拡張のリストに対してそれをチェックする。パスした場合、Webルートより前のディレクトリにアップロードすることができます。これが本質的に必要とする追加のステップは、ファイルに複数の拡張子がある場合、自動的にスキップされ、そこでセキュリティリスクが発生する可能性を避けることです。

最後に、画像サイズの確認や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); 
}