Метод readAsDataURL
используется для чтения содержимог указанного Blob
или File
.Когда операция закончится, readyState
примет значение DONE
, и будет вызвано событие loadend
. В то же время, аттрибут result
будет содержать данные как URL, представляющий файл, кодированый в
base64 строку.
Синтаксис
instanceOfFileReader.readAsDataURL(blob);
Параметры
Пример
HTML
<input type="file" onchange="previewFile()"><br> <img src="" height="200" alt="Image preview...">
JavaScript
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 = ""; } }
Результат
Примечание:
FileReader()
конструктор не поддерживается Internet Explorer до 10 версии. Для полностью совместимого решения прочтите crossbrowser possible solution for image preview. Смотрите так же this more powerful example.Спецификации
Specification | Status | Comment |
---|---|---|
File API The definition of 'FileReader' in that specification. |
Working Draft | Initial definition |
Совместимость с браузерами
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Basic support | Chrome Full support 7 | Edge Full support Yes | Firefox
Full support
3.6
| IE Full support 10 | Opera Full support 11 | Safari Full support 6 | WebView Android ? | Chrome Android Full support Yes | Edge Mobile Full support Yes | Firefox Android Full support 32 | Opera Android Full support 11 | Safari iOS Full support 6.1 | Samsung Internet Android ? |
Available in workers | Chrome Full support Yes | Edge Full support Yes | Firefox Full support 46 | IE No support No | Opera Full support 11 | Safari No support No | WebView Android Full support Yes | Chrome Android Full support Yes | Edge Mobile Full support Yes | Firefox Android Full support 46 | Opera Android Full support 11 | Safari iOS No support No | Samsung Internet Android ? |
abort | Chrome Full support 7 | Edge Full support Yes | Firefox Full support 3.6 | IE Full support 10 | Opera Full support 11 | Safari Full support 6 | WebView Android ? | Chrome Android Full support Yes | Edge Mobile Full support Yes | Firefox Android Full support 32 | Opera Android Full support 11 | Safari iOS Full support 6.1 | Samsung Internet Android ? |
error | Chrome Full support 7 | Edge Full support Yes | Firefox
Full support
3.6
| IE
Full support
10
| Opera Full support 11 | Safari
Full support
6
| WebView Android ? | Chrome Android Full support Yes | Edge Mobile Full support Yes | Firefox Android
Full support
32
| Opera Android Full support 11 | Safari iOS
Full support
6.1
| Samsung Internet Android ? |
onabort | Chrome Full support 7 | Edge Full support Yes | Firefox Full support 3.6 | IE Full support 10 | Opera Full support 11 | Safari Full support 6 | WebView Android ? | Chrome Android Full support Yes | Edge Mobile Full support Yes | Firefox Android Full support 32 | Opera Android Full support 11 | Safari iOS Full support 6.1 | Samsung Internet Android ? |
onerror | Chrome Full support 7 | Edge Full support Yes | Firefox Full support 3.6 | IE Full support 10 | Opera Full support 11 | Safari Full support 6 | WebView Android ? | Chrome Android Full support Yes | Edge Mobile Full support Yes | Firefox Android Full support 32 | Opera Android Full support 11 | Safari iOS Full support 6.1 | Samsung Internet Android ? |
onload | Chrome Full support 7 | Edge Full support Yes | Firefox Full support 3.6 | IE Full support 10 | Opera Full support 11 | Safari Full support 6 | WebView Android ? | Chrome Android Full support Yes | Edge Mobile Full support Yes | Firefox Android Full support 32 | Opera Android Full support 11 | Safari iOS Full support 6.1 | Samsung Internet Android ? |
onloadend | Chrome Full support 7 | Edge Full support Yes | Firefox Full support 3.6 | IE Full support 10 | Opera Full support 11 | Safari Full support 6 | WebView Android ? | Chrome Android Full support Yes | Edge Mobile Full support Yes | Firefox Android Full support 32 | Opera Android Full support 11 | Safari iOS Full support 6.1 | Samsung Internet Android ? |
onprogress | Chrome Full support 7 | Edge Full support Yes | Firefox Full support 3.6 | IE Full support 10 | Opera Full support 11 | Safari Full support 6 | WebView Android ? | Chrome Android Full support Yes | Edge Mobile Full support Yes | Firefox Android Full support 32 | Opera Android Full support 11 | Safari iOS Full support 6.1 | Samsung Internet Android ? |
readyState | Chrome Full support 7 | Edge Full support Yes | Firefox Full support 3.6 | IE Full support 10 | Opera Full support 11 | Safari Full support 6 | WebView Android ? | Chrome Android Full support Yes | Edge Mobile Full support Yes | Firefox Android Full support 32 | Opera Android Full support 11 | Safari iOS Full support 6.1 | Samsung Internet Android ? |
readAsArrayBuffer | Chrome Full support 7 | Edge Full support Yes | Firefox Full support 3.6 | IE Full support 10 | Opera Full support 12 | Safari Full support 6 | WebView Android ? | Chrome Android Full support Yes | Edge Mobile Full support Yes | Firefox Android Full support 32 | Opera Android Full support 12 | Safari iOS Full support 6.1 | Samsung Internet Android ? |
readAsBinaryString | Chrome Full support 7 | Edge Full support Yes | Firefox Full support 3.6 | IE No support No | Opera Full support 11 | Safari Full support 6 | WebView Android ? | Chrome Android Full support Yes | Edge Mobile Full support Yes | Firefox Android Full support 32 | Opera Android Full support 11 | Safari iOS Full support 6.1 | Samsung Internet Android ? |
readAsDataURL | Chrome Full support 7 | Edge Full support Yes | Firefox Full support 3.6 | IE Full support 10 | Opera Full support 11 | Safari Full support 6 | WebView Android ? | Chrome Android Full support Yes | Edge Mobile Full support Yes | Firefox Android Full support 32 | Opera Android Full support 11 | Safari iOS Full support 6.1 | Samsung Internet Android ? |
readAsText | Chrome Full support 7 | Edge Full support Yes | Firefox Full support 3.6 | IE Full support 10 | Opera Full support 11 | Safari Full support 6 | WebView Android ? | Chrome Android Full support Yes | Edge Mobile Full support Yes | Firefox Android Full support 32 | Opera Android Full support 11 | Safari iOS Full support 6.1 | Samsung Internet Android ? |
result | Chrome Full support 7 | Edge Full support Yes | Firefox Full support 3.6 | IE Full support 10 | Opera Full support 11 | Safari Full support 6 | WebView Android ? | Chrome Android Full support Yes | Edge Mobile Full support Yes | Firefox Android Full support 32 | Opera Android Full support 11 | Safari iOS Full support 6.1 | Samsung Internet Android ? |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- See implementation notes.
- See implementation notes.