diff options
Diffstat (limited to 'files/ja/web/api/filereader/readasdataurl/index.html')
| -rw-r--r-- | files/ja/web/api/filereader/readasdataurl/index.html | 133 |
1 files changed, 133 insertions, 0 deletions
diff --git a/files/ja/web/api/filereader/readasdataurl/index.html b/files/ja/web/api/filereader/readasdataurl/index.html new file mode 100644 index 0000000000..cd53d210e4 --- /dev/null +++ b/files/ja/web/api/filereader/readasdataurl/index.html @@ -0,0 +1,133 @@ +--- +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 class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<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> |