質問編集履歴

3

ソース追加

2016/09/18 06:00

投稿

zak
zak

スコア35

test CHANGED
File without changes
test CHANGED
@@ -187,3 +187,169 @@
187
187
 
188
188
 
189
189
  img要素の枠はこちらのcssのミスでした。申し訳ありません。
190
+
191
+
192
+
193
+ ○syuilo様のご回答を参考にして修正したソース
194
+
195
+ ```html
196
+
197
+ <input type="file" id="input_01_file" accept="image/bmp,image/gif,image/jpeg,image/png" /><br />
198
+
199
+ Blob URL Scheme:<br>
200
+
201
+ <input id="edit_01_result" size="40" disabled /><br>
202
+
203
+ 画像:<br>
204
+
205
+ <script type="text/javascript">
206
+
207
+ <!--
208
+
209
+ // imgタグ表示
210
+
211
+ function Image_Write() {
212
+
213
+ document.write("<img src='' id='image_01' >");
214
+
215
+ }
216
+
217
+
218
+
219
+
220
+
221
+ // 匿名関数内で実行
222
+
223
+ (function() {
224
+
225
+
226
+
227
+ var blob_url = null;
228
+
229
+
230
+
231
+ // 各エレメントを取得
232
+
233
+ var element_file = document.getElementById("input_01_file");
234
+
235
+ var element_result = document.getElementById("edit_01_result");
236
+
237
+
238
+
239
+ // ------------------------------------------------------------
240
+
241
+ // サポート状況
242
+
243
+ // ------------------------------------------------------------
244
+
245
+ if(!window.File){
246
+
247
+ element_result.value = "File クラスに対応していません。";
248
+
249
+ return;
250
+
251
+ }
252
+
253
+ if(!window.URL){
254
+
255
+ element_result.value = "Blob URL Scheme に対応していません。";
256
+
257
+ return;
258
+
259
+ }
260
+
261
+
262
+
263
+ // ------------------------------------------------------------
264
+
265
+ // 値が変化した時に実行されるイベント
266
+
267
+ // ------------------------------------------------------------
268
+
269
+ element_file.addEventListener("change" , function(e){
270
+
271
+
272
+
273
+ // ファイルが選択されたか
274
+
275
+ if(element_file.value) {
276
+
277
+ // imgタグ表示
278
+
279
+ Image_Write();
280
+
281
+ } else {
282
+
283
+ return;
284
+
285
+ }
286
+
287
+
288
+
289
+ var image = document.getElementById("image_01");
290
+
291
+
292
+
293
+ // ------------------------------------------------------------
294
+
295
+ // File オブジェクトを取得(HTML5 世代)
296
+
297
+ // ------------------------------------------------------------
298
+
299
+ // ファイルリストを取得
300
+
301
+ var file_list = element_file.files;
302
+
303
+ if(!file_list) return;
304
+
305
+
306
+
307
+ // 0 番目の File オブジェクトを取得
308
+
309
+ var file = file_list[0];
310
+
311
+ if(!file) return;
312
+
313
+
314
+
315
+ // ------------------------------------------------------------
316
+
317
+ // Blob URL Scheme を生成
318
+
319
+ // ------------------------------------------------------------
320
+
321
+ blob_url = window.URL.createObjectURL(file);
322
+
323
+
324
+
325
+ // 画像を読み込む
326
+
327
+ image.src = blob_url;
328
+
329
+ image.width = 100;
330
+
331
+ image.height = 100;
332
+
333
+
334
+
335
+ // 結果を表示
336
+
337
+ element_result.value = blob_url;
338
+
339
+ });
340
+
341
+
342
+
343
+ })();
344
+
345
+ //-->
346
+
347
+ </script>
348
+
349
+ ```
350
+
351
+
352
+
353
+ このソースでは、ファイルを選択した後に画像のみが表示されるようになってしまいます。
354
+
355
+ 初心者なのでどのように修正すれば良いかわかりません。

2

ソースの追加。

2016/09/18 06:00

投稿

zak
zak

スコア35

test CHANGED
File without changes
test CHANGED
@@ -33,3 +33,157 @@
33
33
 
34
34
 
35
35
  よろしくお願いします。
36
+
37
+
38
+
39
+ ○追記
40
+
41
+
42
+
43
+ ```html
44
+
45
+ <input type="file" id="input_01_file" accept="image/bmp,image/gif,image/jpeg,image/png" /><br />
46
+
47
+ Blob URL Scheme:<br>
48
+
49
+ <input id="edit_01_result" size="40" disabled /><br>
50
+
51
+ 画像:<br>
52
+
53
+ <img src="" id="image_01" >
54
+
55
+
56
+
57
+ <script type="text/javascript">
58
+
59
+ <!--
60
+
61
+ // 匿名関数内で実行
62
+
63
+ (function (){
64
+
65
+
66
+
67
+ var blob_url = null;
68
+
69
+
70
+
71
+ // 各エレメントを取得
72
+
73
+ var element_file = document.getElementById("input_01_file");
74
+
75
+ var element_result = document.getElementById("edit_01_result");
76
+
77
+ var image = document.getElementById("image_01");
78
+
79
+
80
+
81
+ // ------------------------------------------------------------
82
+
83
+ // サポート状況
84
+
85
+ // ------------------------------------------------------------
86
+
87
+ if(!window.File){
88
+
89
+ element_result.value = "File クラスに対応していません。";
90
+
91
+ return;
92
+
93
+ }
94
+
95
+ if(!window.URL){
96
+
97
+ element_result.value = "Blob URL Scheme に対応していません。";
98
+
99
+ return;
100
+
101
+ }
102
+
103
+
104
+
105
+ // ------------------------------------------------------------
106
+
107
+ // 値が変化した時に実行されるイベント
108
+
109
+ // ------------------------------------------------------------
110
+
111
+ element_file.addEventListener("change" , function(e){
112
+
113
+
114
+
115
+ // ファイルが選択されたか
116
+
117
+ if(!(element_file.value)) {
118
+
119
+ image.src = undefined;
120
+
121
+ return;
122
+
123
+ }
124
+
125
+
126
+
127
+ // ------------------------------------------------------------
128
+
129
+ // File オブジェクトを取得(HTML5 世代)
130
+
131
+ // ------------------------------------------------------------
132
+
133
+ // ファイルリストを取得
134
+
135
+ var file_list = element_file.files;
136
+
137
+ if(!file_list) return;
138
+
139
+
140
+
141
+ // 0 番目の File オブジェクトを取得
142
+
143
+ var file = file_list[0];
144
+
145
+ if(!file) return;
146
+
147
+
148
+
149
+ // ------------------------------------------------------------
150
+
151
+ // Blob URL Scheme を生成
152
+
153
+ // ------------------------------------------------------------
154
+
155
+ blob_url = window.URL.createObjectURL(file);
156
+
157
+
158
+
159
+ // 画像を読み込む
160
+
161
+ image.src = blob_url;
162
+
163
+ image.width = 100;
164
+
165
+ image.height = 100;
166
+
167
+
168
+
169
+ // 結果を表示
170
+
171
+ element_result.value = blob_url;
172
+
173
+ });
174
+
175
+
176
+
177
+ })();
178
+
179
+ //-->
180
+
181
+ </script>
182
+
183
+
184
+
185
+ ```
186
+
187
+
188
+
189
+ img要素の枠はこちらのcssのミスでした。申し訳ありません。

1

誤字を修正しました。

2016/09/18 04:22

投稿

zak
zak

スコア35

test CHANGED
File without changes
test CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
  フォームのfileで選択された画像などをjavascriptのBlob URL Schemeを使って表示しているのですが、
8
8
 
9
- この方法ですと最初からimgタグのsrcの枠(?)が表示されています。
9
+ この方法ですと最初からimgタグの枠(?)が表示されています。
10
10
 
11
11
 
12
12
 
@@ -26,7 +26,7 @@
26
26
 
27
27
  ファイルは選択されていないのに画像は表示されたままになってしまいます。
28
28
 
29
- このひょうじされたままの画像も消すことはできないでしょうか?
29
+ この表示されたままの画像も消すことはできないでしょうか?
30
30
 
31
31
 
32
32