---
title: FileReader.readAsDataURL()
slug: Web/API/FileReader/readAsDataURL
translation_of: Web/API/FileReader/readAsDataURL
---
<p>{{APIRef("File API")}}</p>

<p><code><font face="Open Sans, Arial, sans-serif">Метод </font>readAsDataURL</code> используется для чтения содержимого указанного {{domxref("Blob")}} или {{domxref("File")}}.Когда операция закончится, {{domxref("FileReader.readyState","readyState")}} примет значение <code>DONE</code>, и будет вызвано событие {{event("loadend")}}. В то же время, атрибут  {{domxref("FileReader.result","result")}} будет содержать данные<code> как URL, представляющий файл, кодированый в</code> base64 строку.</p>

<h2 id="Синтаксис">Синтаксис</h2>

<pre><em>instanceOfFileReader</em>.readAsDataURL(blob);</pre>

<h3 id="Параметры">Параметры</h3>

<dl>
 <dt><code>blob</code></dt>
 <dd>{{domxref("Blob")}} или{{domxref("File")}} которые следует прочитать.</dd>
</dl>

<h2 id="Пример">Пример</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;input type="file" onchange="previewFile()"&gt;&lt;br&gt;
&lt;img src="" height="200" alt="Image preview..."&gt;</pre>

<h3 id="JavaScript">JavaScript</h3>

<pre class="brush: js">function previewFile() {
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.onloadend = function () {
    preview.src = reader.result;
  }

  if (file) {
    reader.readAsDataURL(file);
  } else {
    preview.src = "";
  }
}</pre>

<h3 id="Результат">Результат</h3>

<p>{{EmbedLiveSample("Пример", "100%", 240)}}</p>

<div class="note"><strong>Примечание:</strong> <a href="/en-US/docs/Web/API/FileReader"><code>FileReader()</code></a> конструктор не поддерживается Internet Explorer до 10 версии. Для полностью совместимого решения прочтите <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="Browser_Compatibility">Спецификации</h2>

<p>{{page("/en-US/docs/Web/API/FileReader","Specifications")}}</p>

<h2 id="Browser_compatibility">Совместимость с браузерами</h2>

<p>{{page("/en-US/docs/Web/API/FileReader","Browser compatibility")}}</p>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li>{{domxref("FileReader")}}</li>
</ul>