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"><input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview..."></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>
|
