フォームから複数のファイルをアップロード(入力欄の動的追加・削除)

前提・実現したいこと

フォームを使ってアップロードする際、ファイル数の制限なくアップロードを行いたい。
初期状態ではファイル入力フィールドは１つだけ表示され、
ファイルを指定すると新しいフィールドが動的に追加される。
また、ファイル入力フィールド毎にファイルを取消すボタンを用意し、
取消ボタンが押下されるとフィールドが動的に削除される。

発生している問題

・追加したファイル入力フィールドにファイルを指定しても、新しいフィールが追加されない。
・取消ボタン押下時のFunctioｎの実装方法がどのようにしてよいかわかりません。

該当のソースコード

HTML
1<div class="upfile" style="display:inline-flex" id="div_upfile[]">
2    <input type="file" name="uploadfile[]" class="fileinput" />
3    <input type="button" id="clearbtn[]" value="選択キャンセル" onClick="clearFile()"/>
4</div>

Javascript
1<script>
2$("document").ready(function(){
3    $(".fileinput").change(fileInputChange);
4});
5
6function fileInputChange(){
7    alert($(".fileinput").last().val());
8    if($(".fileinput").last().val() != ""){
9        $(".upfile").after('<div class="upfile" style="display:inline-flex" id="div_upfile[]">'
10        + '<input type="file" name="uploadfile[]" class="fileinput" />'
11        + '<input type="button" id="clearbtn[]" value="取消" onClick="clearFile()""/>'
12        + '</div>') .bind('change', fileInputChange);
13    }
14}
15
16function  clearFile(){
17    $(function(){
18       //何を書けばよいか。。
19    });
20}
21</script>

x_x

2018/08/16 07:02

multiple属性が使えないブラウザ(IE9以下)を対象にしているのでしょうか？

take_ken

2018/08/16 07:12 編集

調べていた際に、multiple属性についても検討してみたのでが、 multiple属性で実装した場合、複数ファイル選択時に選択されたファイル名の表示ができない（？）認識です。今回は、選択されたファイル名を画面に表示させたいので、multiple属性を使わずに実装できる方法を検討したいです。

行動規範の内容に同意します

回答1件

ベストアンサー

idは重複できないのでclassになっているものとして

JavaScript
1$(document).on('change', 'input[type="file"].fileinput', function(event) {
2    const target = $(this);
3    if (target.val() !== '') {
4        const targetContainer = target.closest('.upfile');
5        const clone = targetContainer.clone();
6        clone.find('.fileinput').val('');
7        targetContainer.after(clone);
8    }
9}).on('click', '.clearbtn\[\]', function(event) {
10    if ($('.upfile').length > 1) {
11        $(this).closest('.upfile').remove();
12    } else {
13        $(this).prev().val('');
14    }
15});

(last判定や"取消"にする等は省略)

なお、multipleであってもfilesプロパティを見ればファイル名がわかります。ファイル名を表示することも可能でしょう。

JavaScript
1    const files = $('input[type="file"]').prop('files');
2    if (files.length) {
3        const fileNames = (Array.from(files).map(function (f) { return f.name; }).join(', '));
4    }