readAsDataURL メソッドは、指定された Blob ないし File オブジェクトを読み込むために使用します。読込処理が終了すると readyState は DONE に変わり、 loadend イベントが生じます。それと同時に result プロパティにはファイルのデータを表す、base64 エンコーディングされた data: URL の文字列が格納されます。
構文
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 = "";
}
}
実行結果
注釈: Internet Explorer 10 以前では
FileReader() コンストラクタがサポートされていません。十分な互換性が必要とされるときは 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 |
ブラウザ実装状況
| Feature | Firefox (Gecko) | Chrome | Edge | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 3.6 (1.9.2)[1] | 7 | (Yes) | 10 | 12.02[2] | 6.0 |
| Support in Web Workers | 46 (46) | (Yes) | (Yes) | No support | (Yes) | No support |
error property uses DOMException, not DOMError |
58 (58) | (Yes) | (Yes) | No support | (Yes) | No support |
| Feature | Firefox Mobile (Gecko) | Android | Edge | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | 32 | 3 | (Yes) | 10 | 11.5 | 6.1 |
| Support in Web Workers | 46.0 (46) | (Yes) | (Yes) | No support | (Yes) | No support |
error property uses DOMException, not DOMError |
58.0 (58) | ? | (Yes) | No support | (Yes) | No support |
[1] Prior to Gecko 2.0 beta 7 (Firefox 4.0 beta 7), all Blob parameters below were File parameters; this has since been updated to match the specification correctly. Prior to Gecko 13.0 (Firefox 13.0 / Thunderbird 13.0 / SeaMonkey 2.10) the FileReader.error property returned a FileError object. This interface has been removed and FileReader.error is now returning the DOMError object as defined in the latest FileAPI draft.
[2] Opera has partial support in 11.1.