htmlでは複数ファイルのアップロードは下記のようなコードで実現することができます。
<input name="files[]" type="file" multiple="multiple" id="test" />しかし、これでは一度アップロードを完了し、もう一度アップロードボタンを押すと、一度目にアップロードしていたファイルは消えてしまいます。
以下のような形です
・1回目のアップロード後の状態
ファイルを2つアップロードします。
・2回目のアップロード後の状態
2回目では、ファイルを3つアップロードします。
これを１回目の2ファイルを残しつつ追加で3ファイルアップロードして最終的に5ファイルにしたいことってないですかね。
本記事では、一度目にアップロードしたファイルを残しつつ、さらに追加でアップロードできるようにする方法を記載します。
完成形サンプル
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<input name="files[]" type="file" multiple="multiple" id="test" />
</body>
<script>
var fileList = [];
$('input#test').change(function() {
var testfile = document.getElementById("test");
var files = $(this).prop('files');
const dt = new DataTransfer();
for(var i = 0; i < fileList.length; i++ ){
dt.items.add(fileList[i]);
}
for(var i = 0; i < files.length; i++){
dt.items.add(files[i]);
fileList.push(files[i]);
}
testfile.files = dt.files;
});
</script>
</html>
完成形のブラウザ動作
１度目のアップロード後の状態
2ファイルをアップロードしています。
ファイルが2ファイルアップロードできていることがわかります。
２度目のアップロード後の状態
1ファイル追加でアップロードします。
アップロードされたファイルが3つになっていることがわかります。
説明
- はじめに、一度アップロードしたものを格納しておくリストを定義します
var fileList = [];inputタグでのアップロードはアップロードボタンを押した瞬間に前にアップロードしたものは削除されてしまうので、アップロードするたびにこの変数に格納しておきます。
2. 次にinputタグにアクセスします。
var testfile = document.getElementById("test");3. 次に、inputタグにファイルオブジェクトを追加するためには、一旦、DataTransferというものにfileオブジェクトを格納する必要があります。
const dt = new DataTransfer();4. 下記のコードで今までfileList変数に蓄積してきたファイルオブジェクトをDataTransferの変数に格納します。
for(var i = 0; i < fileList.length; i++ ){
dt.items.add(fileList[i]);
}5. 下記のコードで今回アップロード分のファイルもDataTransferの変数に格納します。
ここでは、今回分は次回アップロード時に利用できるようにfileList変数に追加しておきます。
for(var i = 0; i < files.length; i++){
dt.items.add(files[i]);
fileList.push(files[i]);
}6. 最後にinputタグへファイルオブジェクトを追加します。
testfile.files = dt.files;以上です。試してみてください。
