うまくいけば、この問題は簡単に解決できます。
ファイルを一度に 1 つずつサーバーにアップロードする必要があるため、ファイル入力フィールドごとに iframe を介してファイルのアップロードをキューに入れるスクリプトがあります。
現在、次のように選択された各ファイルをループして個別にアップロードする作業スクリプトがあります。
<input type="file" name="file" />
<input type="file" name="file" />
<input type="file" name="file" />
そして、このようにループします:
$('input[type="file"]').each(function(){
私の質問は、.eachを 1 つのファイル チューザーだけで動作するように変更するにはどうすればよいかということです。
<input type="file" name="file" mulitple/>
$(???).each(function(){
私が試してみました
fileInput = document.getElementById("multiFileChooser");
$(fileInput.files).each(function(){
ただし、ファイルは送信されず、リクエストのペイロードにも存在しません。
編集2:
修正済みの有効なソリューション:
(function($){$(document).ready(function(){
$('input[type="submit"]').click(function(){ //on button press
for(var ii = 0; ii < $('#multiChoose').get(0).files.length; ii++){
sendFile($('#multiChoose').get(0).files[ii]);
//wait until upload complete to start next one
}
});
})})(jQuery);
function sendFile(file) {
var uri = "upload.php";
var xhr = new XMLHttpRequest();
var fd = new FormData();
xhr.open("POST", uri, true);
xhr.onreadystatechange = function() {
//queue next file
};
fd.append('file', file);
xhr.send(fd);
}