回答編集履歴
1
追記
answer
CHANGED
|
@@ -29,4 +29,41 @@
|
|
|
29
29
|
```
|
|
30
30
|
|
|
31
31
|
|
|
32
|
-
別の質問への回答として [CODEPEN](https://codepen.io/AkitoshiManabe/pen/xxwZyRr) にプレビューサンプルを作ったことがありますが、これに**個別の削除（Ajax送信用 FormDataの再作成）機能**を加えることで、要件を満たす内容に近づけるのではないでしょうか。
|
|
32
|
+
別の質問への回答として [CODEPEN](https://codepen.io/AkitoshiManabe/pen/xxwZyRr) にプレビューサンプルを作ったことがありますが、これに**個別の削除（Ajax送信用 FormDataの再作成）機能**を加えることで、要件を満たす内容に近づけるのではないでしょうか。
|
|
33
|
+
|
|
34
|
+
----
|
|
35
|
+
追記）
|
|
36
|
+
|
|
37
|
+
jQueryの場合も、HTMLの on~ 属性に書かずに、イベントリスナを別途定義する手法に慣れてゆきます。
|
|
38
|
+
（イベントリスナの引数``evt``に渡されたオブジェクトは 伝搬情報として意味を持ったプロパティがあるため）
|
|
39
|
+
|
|
40
|
+
```html
|
|
41
|
+
<input type="file" id="file_btn1" accept="image/*" name="file_btn1" multiple>
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
```javascript
|
|
45
|
+
const maxFiles = 5;
|
|
46
|
+
$(function(){
|
|
47
|
+
|
|
48
|
+
let $file_btn = $("#file_btn1");
|
|
49
|
+
|
|
50
|
+
// addEventListener() の jQuery による略記
|
|
51
|
+
$file_btn.on("change", function(evt){
|
|
52
|
+
// jQuery オブジェクトの最初の要素は Element が格納されているので
|
|
53
|
+
// 次のようにHTMLElementを取得できる。
|
|
54
|
+
// $(this)[0]; $(this).get(0);
|
|
55
|
+
|
|
56
|
+
// 変数 $file_btn に格納済みのjQueryオブジェクトを使っても良い。
|
|
57
|
+
let elm = $file_btn[0];
|
|
58
|
+
if( maxFiles < elm.files.length ) {
|
|
59
|
+
|
|
60
|
+
alert(`添付できるのは ${maxFiles} 枚までです` );
|
|
61
|
+
|
|
62
|
+
elm.value = null; // input[type=file] をリセット
|
|
63
|
+
|
|
64
|
+
return false;// イベントリスナを抜ける。
|
|
65
|
+
}
|
|
66
|
+
// プレビュー処理など。
|
|
67
|
+
})
|
|
68
|
+
});
|
|
69
|
+
```
|