回答編集履歴
3
ちょこちょこミスってたので直しました。
answer
CHANGED
|
@@ -4,24 +4,21 @@
|
|
|
4
4
|
|
|
5
5
|
また、これはやっていませんが、文言を統一的に管理するために、htmlに直書きせず変数で持っておき、初期化か何かでセットするようにしたほうがよいかもしれません。
|
|
6
6
|
|
|
7
|
-
**処理の流れ**
|
|
8
|
-
```
|
|
9
|
-
ボタンをクリックする
|
|
10
|
-
---> ファイル入力の状態に合わせて、ファイル入力 を操作する
|
|
11
|
-
---> ファイル入力が自身の変化イベントをキャッチして、その変更を他の要素に反映させる
|
|
12
|
-
```
|
|
13
7
|
**コード**
|
|
14
8
|
```html
|
|
15
9
|
<html>
|
|
10
|
+
|
|
16
11
|
<head>
|
|
17
12
|
<style>
|
|
18
13
|
.invisible { display: none; }
|
|
19
14
|
</style>
|
|
20
15
|
</head>
|
|
16
|
+
|
|
21
17
|
<body>
|
|
22
18
|
<div id="input-group">
|
|
23
|
-
<input type="file" id="iptFile" class="invisible"
|
|
19
|
+
<input type="file" id="iptFile" class="invisible" onchange="onChangeIptFile(event)">
|
|
24
|
-
<input type="button" id="
|
|
20
|
+
<input type="button" id="selectBtn" value="ファイルを選択" onclick="onClickBtn(event)">
|
|
21
|
+
<input type="button" id="removeBtn" value="削除" class="invisible" onclick="onClickBtn(event)">
|
|
25
22
|
<label for="btn">ファイルが選択されていません</label>
|
|
26
23
|
</div>
|
|
27
24
|
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
|
|
@@ -35,27 +32,33 @@
|
|
|
35
32
|
}
|
|
36
33
|
// ファイル選択済みであれば、選択を解除します
|
|
37
34
|
else {
|
|
35
|
+
// ファイル選択解除はイベントが発火しないので、こちらで発火させる
|
|
38
|
-
iptFile.val(
|
|
36
|
+
iptFile.val('');
|
|
37
|
+
onChangeIptFile(null);
|
|
39
38
|
}
|
|
40
39
|
}
|
|
41
40
|
function onChangeIptFile(event) {
|
|
42
|
-
var fileName = $(
|
|
41
|
+
var fileName = $('#iptFile').val();
|
|
43
42
|
var label = $('#input-group > label');
|
|
44
|
-
var
|
|
43
|
+
var selectBtn = $('#selectBtn');
|
|
44
|
+
var removeBtn = $('#removeBtn');
|
|
45
|
+
var invisibleClass = 'invisible';
|
|
45
46
|
|
|
46
47
|
// ファイルが選択済みになった場合
|
|
47
48
|
if (fileName != '') {
|
|
48
|
-
btn.val('削除');
|
|
49
49
|
label.text(fileName);
|
|
50
|
+
selectBtn.addClass(invisibleClass);
|
|
50
|
-
|
|
51
|
+
removeBtn.removeClass(invisibleClass);
|
|
51
52
|
}
|
|
52
53
|
// ファイルが未選択になった場合
|
|
53
54
|
else {
|
|
54
|
-
btn.val('ファイルを選択');
|
|
55
|
-
label.
|
|
55
|
+
label.text('ファイルが選択されていません');
|
|
56
|
+
selectBtn.removeClass(invisibleClass);
|
|
57
|
+
removeBtn.addClass(invisibleClass);
|
|
56
58
|
}
|
|
57
59
|
}
|
|
58
60
|
</script>
|
|
59
61
|
</body>
|
|
62
|
+
|
|
60
63
|
</html>
|
|
61
64
|
```
|
2
追記
answer
CHANGED
|
@@ -1,7 +1,16 @@
|
|
|
1
|
-
まるっと書き換えました。
|
|
1
|
+
処理がわかりやすくなるよう、まるっと書き換えました。シンプルだと思います。
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
ただ、ファイル入力を隠したので、それの見た目がブラウザ依存にはなりませんが…。
|
|
4
4
|
|
|
5
|
+
また、これはやっていませんが、文言を統一的に管理するために、htmlに直書きせず変数で持っておき、初期化か何かでセットするようにしたほうがよいかもしれません。
|
|
6
|
+
|
|
7
|
+
**処理の流れ**
|
|
8
|
+
```
|
|
9
|
+
ボタンをクリックする
|
|
10
|
+
---> ファイル入力の状態に合わせて、ファイル入力 を操作する
|
|
11
|
+
---> ファイル入力が自身の変化イベントをキャッチして、その変更を他の要素に反映させる
|
|
12
|
+
```
|
|
13
|
+
**コード**
|
|
5
14
|
```html
|
|
6
15
|
<html>
|
|
7
16
|
<head>
|
1
微修正
answer
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
まるっと書き換えました。
|
|
1
|
+
まるっと書き換えました。ファイル入力を隠したので、ブラウザ依存の見た目にはなりませんが…。
|
|
2
|
+
|
|
2
3
|
これはやっていませんが、文言を統一的に管理するために、htmlに直書きせず変数で持っておき、初期化か何かでセットするようにしたほうがよいかもしれません。
|
|
3
4
|
|
|
4
5
|
```html
|
|
@@ -10,7 +11,7 @@
|
|
|
10
11
|
</head>
|
|
11
12
|
<body>
|
|
12
13
|
<div id="input-group">
|
|
13
|
-
<input type="file" id="iptFile"
|
|
14
|
+
<input type="file" id="iptFile" class="invisible" onchange="onChangeIptFile(event)">
|
|
14
15
|
<input type="button" id="btn" value="ファイルを選択" onclick="onClickBtn(event)">
|
|
15
16
|
<label for="btn">ファイルが選択されていません</label>
|
|
16
17
|
</div>
|