1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
---
title: FileReader.readAsDataURL()
slug: Web/API/FileReader/readAsDataURL
tags:
- API
- Base 64
- File API
- FileReader
- Files
- Method
- Reference
- メソッド
translation_of: Web/API/FileReader/readAsDataURL
---
<p><code>readAsDataURL</code> メソッドは、指定された{{domxref("Blob")}} または {{domxref("File")}} の内容を読み込むために使用されます。読み込み操作が終了すると、{{domxref("FileReader.readyState", "readyState")}} が <code>DONE</code> となり、{{event("loadend")}} が発生します。このとき、{{domxref("FileReader.result", "result")}} 属性には、ファイルのデータを表す、base64 エンコーディングされた <a href="/ja/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">data: URL</a> の文字列が格納されます。</p>
<div class="note">
<p><strong>メモ:</strong> blob の {{domxref("FileReader.result","result")}} は、先に Base64 でエンコードされたデータの前にある Data-URL の宣言を削除しておかないと、直接 Base64 としてデコードすることができません。 Base64 でエンコードされた文字列のみを受け取る場合は、先に結果から <code>data:*/*;base64,</code> を削除しておく必要があります。</p>
</div>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="syntaxbox notranslate"><em>instanceOfFileReader</em>.readAsDataURL(blob);</pre>
<h3 id="Parameters" name="Parameters">引数</h3>
<dl>
<dt><code>blob</code></dt>
<dd>メソッドで読み込む {{domxref("Blob")}} または {{domxref("File")}} オブジェクトです。</dd>
</dl>
<h2 id="Example" name="Example">例</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html notranslate"><input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="画像のプレビュー..."></pre>
<h3 id="JavaScript">JavaScript</h3>
<pre class="brush: js notranslate">function previewFile() {
const preview = document.querySelector('img');
const file = document.querySelector('input[type=file]').files[0];
const reader = new FileReader();
reader.addEventListener("load", function () {
// 画像ファイルを base64 文字列に変換します
preview.src = reader.result;
}, false);
if (file) {
reader.readAsDataURL(file);
}
}</pre>
<h3 id="Live_Result" name="Live_Result">ライブ結果</h3>
<p>{{EmbedLiveSample("Example", "100%", 240)}}</p>
<h2 id="Example_reading_multiple_files" name="Example_reading_multiple_files">複数ファイルを読み取る例</h2>
<h3 id="HTML_2">HTML</h3>
<pre class="brush: html notranslate"><input id="browse" type="file" onchange="previewFiles()" multiple>
<div id="preview"></div></pre>
<h3 id="JavaScript_2">JavaScript</h3>
<pre class="brush: js notranslate">function previewFiles() {
var preview = document.querySelector('#preview');
var files = document.querySelector('input[type=file]').files;
function readAndPreview(file) {
// `file.name` が拡張子の基準と一致していることを確認します。
if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) {
var reader = new FileReader();
reader.addEventListener("load", function () {
var image = new Image();
image.height = 100;
image.title = file.name;
image.src = this.result;
preview.appendChild( image );
}, false);
reader.readAsDataURL(file);
}
}
if (files) {
[].forEach.call(files, readAndPreview);
}
}</pre>
<div class="note"><strong>メモ:</strong> Internet Explorer 10 以前では <a href="/en-US/docs/Web/API/FileReader"><code>FileReader()</code></a> コンストラクターに対応していません。十分な互換性が必要とされるときは <a class="internal" href="https://mdn.mozillademos.org/files/3699/crossbrowser_image_preview.html" title="crossbrowser_image_preview.html">crossbrowser possible solution for image preview</a> または <a href="https://mdn.mozillademos.org/files/3698/image_upload_preview.html">this more powerful example</a> を参照してください。</div>
<h2 id="Specifications" name="Specifications">仕様</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("File API", "#FileReader-interface", "FileReader")}}</td>
<td>{{Spec2("File API")}}</td>
<td>初回定義</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザの互換性</h2>
<p>{{Compat("api.FileReader.readAsDataURL")}}</p>
<h2 id="See_also" name="See_also">あわせて参照</h2>
<ul>
<li>{{domxref("FileReader")}}</li>
<li>{{domxref("URL.createObjectURL()")}}</li>
</ul>
<div>{{APIRef("File API")}}</div>
|
