aboutsummaryrefslogtreecommitdiff
path: root/files/ru/web/api/filereader/readasdataurl/index.html
blob: 823d9a15441472436d2f576726aa22ba0a463e52 (plain)
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
---
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>