はFORMDATA（）

Question

var fd = new FormData(); 
fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]); 
var xhr = new XMLHttpRequest(); 
xhr.open("POST", "uph.php"); 
xhr.send(fd); 

uph.phpを使用して複数のファイルをアップロードします。選択したファイルに対してこれを動作させるにはどうすればよいですか？

[0]を削除しようとしましたが、機能しませんでした。

Answer 1

あなただけfileToUploadの代わりにfileToUpload[]を使用する必要があります：あなたが追加したファイルの長さを取得する必要があります

fd.append("fileToUpload[]", document.getElementById('fileToUpload').files[0]); 

をそして、それは複数の名前、サイズ、などを持つ配列を返します...

Answer 2

JSで、その後

//JavaScript 
var ins = document.getElementById('fileToUpload').files.length; 
for (var x = 0; x < ins; x++) { 
    fd.append("fileToUpload[]", document.getElementById('fileToUpload').files[x]); 
} 

//PHP 
$count = count($_FILES['fileToUpload']['name']); 
for ($i = 0; $i < $count; $i++) { 
    echo 'Name: '.$_FILES['fileToUpload']['name'][$i].'<br/>'; 
} 

Answer 3

以下のようにAJAX要求を介して、JavaScriptを使用して移動するための方法を、それを送信します。

var data = new FormData(); 

$.each($("input[type='file']")[0].files, function(i, file) { 
    data.append('file', file); 
}); 

$.ajax({ 
    type: 'POST', 
    url: '/your/url', 
    cache: false, 
    contentType: false, 
    processData: false, 
    data : data, 
    success: function(result){ 
     console.log(result); 
    }, 
    error: function(err){ 
     console.log(err); 
    } 
}) 

data.append（ 'file'、file）を複数回呼び出すと、リクエストにはファイルの配列が含まれます。

自分がNode.jsのとマルチパートハンドラミドルウェアmulterを使用して、次のようなデータを取得：

router.post('/trip/save', upload.array('file', 10), function(req, res){ 
    // Your array of files is in req.files 
}