さて、ここからがいよいよ面白くなります。 これらの読み込みメソッドのいずれかが 以下の例では、ユーザーが選択したファイルから画像を選別し、対象ファイルで 例: ファイルの読み取り例です。ぜひお試しください。File 参照を取得したら、FileReader オブジェクトをインスタンス化してコンテンツをメモリに読み取ります。読み込みが終了すると、リーダーのonload イベントが開始され、result 属性を使用してファイル データにアクセスできるようになります。FileReader にはファイルを非同期で読み込むためのオプションが 4 つあります:FileReader.readAsBinaryString(Blob|File) - result プロパティにはファイル/ブロブ データがバイナリ文字列として格納されます。各バイトは、0～255 の範囲の整数で表されます。FileReader.readAsText(Blob|File, opt_encoding) - result プロパティにはファイル/ブロブ データがテキスト文字列として格納されます。デフォルトでは、この文字列は「UTF-8」としてデコードされます。オプションのエンコード パラメータを使用すると、他の形式を指定できます。FileReader.readAsDataURL(Blob|File) - result プロパティにはデータ URL としてエンコードされたファイル/ブロブ データが格納されます。FileReader.readAsArrayBuffer(Blob|File) - result プロパティには、ファイル/ブロブ データが ArrayBuffer オブジェクトとして格納されます。FileReader オブジェクトで呼び出されると、onloadstart、onprogress、onload、onabort、onerror、onloadend を使用して進行状況を追跡できるようになります。reader.readAsDataURL() を呼び出し、データ URL に「src」属性を設定してサムネイルを表示しています。<style> .thumb { height: 75px; border: 1px solid #000; margin: 10px 5px 0 0; } </style> <input type="file" id="files" name="files[]" multiple /> <output id="list"></output> <script> function handleFileSelect(evt) { var files = evt.target.files; // FileList object // Loop through the FileList and render image files as thumbnails. for (var i = 0, f; f = files[i]; i++) { // Only process image files. if (!f.type.match('image.*')) { continue; } var reader = new FileReader(); // Closure to capture the file information. reader.onload = (function(theFile) { return function(e) { // Render thumbnail. var span = document.createElement('span'); span.innerHTML = ['<img class="thumb" src="', e.target.result, '" title="', escape(theFile.name), '"/>'].join(''); document.getElementById('list').insertBefore(span, null); }; })(f); // Read in the image file as a data URL. reader.readAsDataURL(f); } } document.getElementById('files').addEventListener('change', handleFileSelect, false); </script>
