We're looking for a person or people to help audit MDN to find places we could speed up. Is this you or someone you know? Check out the RFP: https://mzl.la/2IHcMiE

readAsDataURL メソッドは、指定された Blob ないし File オブジェクトを読み込むために使用します。読込処理が終了すると readyStateDONE に変わり、 loadend イベントが生じます。それと同時に result プロパティにはファイルのデータを表す、base64 エンコーディングされた data: URL の文字列が格納されます。




メソッドで読み込む Blob または File オブジェクトです。


<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">


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) {
  } 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.



 このページの貢献者: clariroid
 最終更新者: clariroid,