HTML5 <input type="file" multiple>の時の添付画像の枚数制限

■やりたい事
画像添付に枚数制限をかけて制限枚数を上回った時にアラート
→処理の中断→追加で画像添付できない様にしたい。

すいません。初学者なので至らない記述等あるかとおもいます。

■困っていること
添付時にアラート出す事はできるが、枚数の制限が出来ていない。
添付した枚数を取得したい。

HTML
1<!DOCTYPE html>
2<html xml:lang="ja" lang="ja">
3<head>
4    <meta charset="utf-8" />
5    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
6    <link rel="stylesheet" href="css/contact.css">
7    <script src="js/jQuery v3.4.1.js" charset="utf-8"></script>
8</head>
9<body>
10    
11
12<!-- header -->
13<header>
14</header>
15<!-- //header -->
16
17<!-- main -->
18            <form name="Form" id="Form" enctype="multipart/form-data" method="post">
19                <input name="#"/>
20                <section class="file">
21                    <p class="file_text">添付画像がある場合はこちら(複数選択可)</p>
22                    
23                    <div class="flex_box file_box">
24                        <div id="preview"></div>
25                        <label for="file_btn1" class="btn_design" id="file_label">
26                            ファイルを選択して下さい</label>
27                        Files:<input type="file" id="file_btn1" accept="image/*" name="file_btn1" multiple onChange="check();">
28                    
29                    
30                        <div id="error-message">ファイルの添付は５枚までです。</div>
31                    </div>
32                </section>
33                <div id="submit_area">
34                    <input class="btn2 submit_form" type="submit" name="send_inquiry" value="送信する" data-action="?adv=__" data-enctype="multipart/form-data" data-method="POST">
35                </div>
36            </form>
37<!-- //main -->
38    <script>
39        function check(){
40    var  fileList = document.getElementById("file_btn1").files;
41        if(fileList.files.length > 4){
42        alert("添付できるファイルは5枚までです。");
43        return false;
44    };
45};
46    </script>
47<script src="js/contact.js" charset="utf-8"></script>
48</body>
49</html>
50

javascript
1//添付画像プレビュー
2function previewFile(file) {
3  // プレビュー画像を追加する要素
4  const preview = document.getElementById('preview');
5
6  // FileReaderオブジェクトを作成
7  const reader = new FileReader();
8
9  // ファイルが読み込まれたときに実行する
10  reader.onload = function (e) {
11    const imageUrl = e.target.result; // 画像のURLはevent.target.resultで呼び出せる
12    
13    //imgBoxを生成
14    const df = document.createDocumentFragment();
15      
16    const imgBox = document.createElement("div");
17    imgBox.id = "previewImg";
18    df.appendChild(imgBox);
19      
20    const imgInner = document.createElement("div");
21    imgInner.id= "imgInner";
22    imgBox.appendChild(imgInner);
23      
24    const img = document.createElement("img");// img要素を作成
25    img.src = imageUrl; // 画像のURLをimg要素にセット
26    imgInner.appendChild(img)
27
28    const btn = document.createElement("div");
29    btn.id = "delete";
30    btn.classList.add("btn_design");
31    btn.textContent = "削除する";
32    imgBox.appendChild(btn);
33      
34    preview.appendChild(df.cloneNode(true));
35  }
36
37  // いざファイルを読み込む
38  reader.readAsDataURL(file);
39}
40
41// <input>でファイルが選択されたときの処理
42const fileInput = document.getElementById('file_btn1');
43
44const handleFileSelect = () => {
45  const files = fileInput.files;
46  for (let i = 0; i < files.length; i++) {
47    previewFile(files[i]);
48    document.getElementById("file_label").textContent = "ファイルの追加";
49      }
50  }
51
52fileInput.addEventListener('change', handleFileSelect);
53
54//削除ボタンの挙動
55    $(document).on("click","#delete",function(){
56    $(this).parent().remove();
57    });

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

回答3件

枚数制限

HTMLでマークアップされた file選択用INPUTフィールドは、基本的な機能しか提供されません。
[multipule] 指定しつつも、添付数を変えたい場合「再度、入力し直してもらう」必要があります
（選択後は、個別に削除できない）。

ご質問にある 非標準機能

ファイル数制限
再選択することなくプレビューから削除（ご質問のコードより要件として感じ取りました）

を加える場合は以下のように実装します。

HTMLフォームは入力のためだけに使う。
FormDataで動的生成した内容をAjaxでPOST

URL.createObjectURL(fileOrBlob) / URL.revokeObjectURL(blobURL) でメモリ上にリソースを確保してURLとして扱えます。

javascript
1// FileReader を使わなくてもプレビューに応用できる
2let imgElm = Object.assign(new Image(), {
3  src : URL.createObjectURL(file),
4  onload(evt) {
5
6    // URL.revokeObjectURL( evt.target.src ) でメモリ解放できるようになる
7  }
8})

別の質問への回答として CODEPEN にプレビューサンプルを作ったことがありますが、これに個別の削除（Ajax送信用 FormDataの再作成）機能を加えることで、要件を満たす内容に近づけるのではないでしょうか。

追記）

jQueryの場合も、HTMLの on~ 属性に書かずに、イベントリスナを別途定義する手法に慣れてゆきます。
（イベントリスナの引数evtに渡されたオブジェクトは伝搬情報として意味を持ったプロパティがあるため）

html
1<input type="file" id="file_btn1" accept="image/*" name="file_btn1" multiple>

javascript
1const maxFiles = 5;
2$(function(){
3
4  let $file_btn = $("#file_btn1");
5
6  // addEventListener() の jQuery による略記
7  $file_btn.on("change", function(evt){
8    // jQuery オブジェクトの最初の要素は Element が格納されているので
9    // 次のようにHTMLElementを取得できる。
10    // $(this)[0];　$(this).get(0);
11
12    // 変数 $file_btn に格納済みのjQueryオブジェクトを使っても良い。
13    let elm = $file_btn[0];
14    if( maxFiles < elm.files.length ) {
15
16      alert(`添付できるのは ${maxFiles} 枚までです` );
17
18      elm.value = null; // input[type=file] をリセット
19
20      return false;// イベントリスナを抜ける。
21    }
22    // プレビュー処理など。
23  })
24});

投稿2020/05/19 05:32

編集2020/06/01 04:03

AkitoshiManabe

総合スコア5434

たとえばカスタムデータで処理するとか

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  document.querySelector('[data-max]').addEventListener('change',e=>{
4    const t=e.target;
5    if(t.files.length>t.dataset["max"]){
6      alert("too much files");
7      t.value="";
8    }
9  });
10});
11</script>
12<input type="file" multiple data-max="3">

投稿2020/06/02 17:10

yambejp

総合スコア116835

添付枚数が条件の数になった時にアラートは出す事ができたのですが
ファイルはそのままプレビューされてしまいます。
プレビュー後に個別削除はできるのですが処理の中断が上手く出来ません。

html
1                        <input type="file" id="file_btn1" accept="image/*" name="file_btn1" multiple onChange="check();">

javascript
1        function check(){
2            if(FileList.length<3){
3                alert("添付できる画像は３枚までです。");
4                this.return.false;
5            }
6    };