質問編集履歴

1

javascriptでinput file要素に要素追加する処理が漏れてました

2017/12/21 03:14

投稿

KoukoMatsumoto
KoukoMatsumoto

スコア41

test CHANGED
File without changes
test CHANGED
@@ -36,7 +36,7 @@
36
36
 
37
37
  <form class='ajax_submit' method="post" action="/post" id="imageform" enctype="multipart/form-data">
38
38
 
39
- <input type="file" id="image-file" name="image" style="display: none" accept="image/*">
39
+ <input type="file" id="image" name="image" style="display: none" accept="image/*">
40
40
 
41
41
  </form>
42
42
 
@@ -76,6 +76,32 @@
76
76
 
77
77
  ```javascript
78
78
 
79
+ window.onload = function() {
80
+
81
+ var fileInput = document.getElementById('image');
82
+
83
+
84
+
85
+ fileInput.addEventListener('change', function(e) {
86
+
87
+ var file = fileInput.files[0];
88
+
89
+ var imageType = /image.*/;
90
+
91
+
92
+
93
+ if (file.type.match(imageType) &&) {
94
+
95
+ var reader = new FileReader();
96
+
97
+ reader.readAsDataURL(file);
98
+
99
+ }
100
+
101
+ });
102
+
103
+
104
+
79
105
  $('#exec').click(function() {
80
106
 
81
107
  var form = $("form#imageform");
@@ -110,4 +136,6 @@
110
136
 
111
137
  });
112
138
 
139
+ }
140
+
113
141
  ```