teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

調整

2018/10/31 04:39

投稿

yambejp
yambejp

スコア117946

answer CHANGED
@@ -30,4 +30,40 @@
30
30
  <div class="filename"></div>
31
31
  <div class="filename"></div>
32
32
  <div class="filename"></div>
33
+ ```
34
+
35
+
36
+ # 追記
37
+ 今回の課題はlabelのforが消えてしまうため、
38
+ 削除ボタンを押した後ファイル選択が効かないことです
39
+ 削除せずに非表示にするとかで対応してもよいかもしれません
40
+
41
+ ```javascript
42
+ <script>
43
+ $(function(){
44
+  $(":file").on('change',function(){
45
+ var file = $(this).prop('files')[0];
46
+ $(this).siblings('.input-label').hide().after($('<button class="file_clear">削除</button>'));
47
+ $(this).siblings('.filename').text(file.name);
48
+ });
49
+
50
+ $(document).on('click', '.file_clear',function(){
51
+ $(this).siblings(':file').val(null);
52
+ $(this).siblings('.filename').text("選択されていません");
53
+ $(this).siblings('.input-label').show()
54
+ $(this).remove();
55
+ });
56
+ });
57
+ </script>
58
+ <div>
59
+  <input type="file" id="01" name="01" class="none">
60
+  <label for="01" class="input-label">ファイルを選択</label>
61
+  <span class="filename">選択されていません</span>
62
+ </div>
63
+ <div>
64
+  <input type="file" id="02" name="02" class="none">
65
+  <label for="02" class="input-label">ファイルを選択</label>
66
+  <span class="filename">選択されていません</span>
67
+ </div>
68
+
33
69
  ```