質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

3回答

6298閲覧

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

mai-0715

総合スコア7

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2020/05/19 03:55

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

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

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

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">ファイルの添付は5枚までです。</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 });

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

枚数制限

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

ご質問にある 非標準機能

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

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

  1. HTMLフォームは入力のためだけに使う。
  2. 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

総合スコア5432

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

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

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

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("添付できる画像は3枚までです。"); 4 this.return.false; 5 } 6 };

投稿2020/06/01 01:01

mai-0715

総合スコア7

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

AkitoshiManabe

2020/06/01 04:11

更に「やってみたこと」は回答欄ではなく、「質問内容」を編集されるのが適切と思います。ただ、せっかく回答欄を使ったので「自己解決」できるよう再度挑戦してみてください(ヒントを追記してあります)。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問