Yesterday: 
Online: 
HTML5で、ファイル選択ダイアログ（input type="file）やドラッグ＆ドロップで、
Webアプリがファイルを受け取る事ができる。
https://groups.google.com/group/html5-developers-jp/browse_thread/thread/b47b9cfbfa0e5a99?hl=ja&pli=1
・File APIによるファイルアクセス
http://libro99.appspot.com/index3?id=384001&label=javascript
わかりやすく説明してある。
HTML側で
<input type="file" id="file1" onchange="dochange(event);">
でJavascriptに渡す
<input type="file">
で受け取ったものは、Javascript側で
var file = event.target.files[0];
で取り出せる。
取り出したFileオブジェクトを引数に渡してgetfileinfo関数に渡すとき
以下のプロパティがある。
name――ファイル名
size――ファイルサイズ
type――ファイルタイプ（HTTPでの形式）
modify――最終修正日
（ブラウザによってサポートされているものが違うらしい）
function dochange(event) {
var file = event.target.files[0];
if (file) {
getfileinfo(file);
}
}
function getfileinfo(file){
var name = file.name;
var size = file.size;
var type = file.type;
var modify = file.modify;
var str = "名前:" + name + "
";
str += "サイズ:" + size + "
";
str += "タイプ:" + type + "
";
str += "最終修正日時:" + modify + "
";
document.getElementById("msg").innerHTML = str;
}
※Firefox 3.5の場合
function getfileinfo(file){
var name = file.fileName;
var size = file.fileSize;
var str = "名前:" + name + "
";
str += "サイズ:" + size + "
";
document.getElementById("msg").innerHTML = str;
}
テキストファイルを読み込むには
readfile関数でファイルの読み込みをする。
[FileReader].readAsText( [File] , [エンコード] );
FileReaderのイベント
onloadstart――読み込み開始時のイベント
onprogress――読み込み作業中のイベント
onload――正常に読み込んだときのイベント
onabort――中断時のイベント
onerror――読み込みエラー時のイベント
onloadend――読み込み処理完了時のイベント
function dochange(event) {
var file = event.target.files[0];
if (file) {
readfile(file);
}
}
function readfile(file) {
var reader = new FileReader();
reader.readAsText(file,"sjis");
reader.onload = loaded;
reader.onerror = error;
}
function loaded(event) {
var str = event.target.result;
document.getElementById("msg").innerHTML = str;
}
function error(evt) {
if (evt.target.error.code == evt.target.error.NOT_READABLE_ERR) {
alert("ファイルが読めません！");
}
}
イメージファイルを読み込む場合もFileReaderを使うことができ、
ファイルの読み込みに「readAsDataURL」というメソッドを使える。
（バイナリファイルの中身を読み込むためのメソッド）
html側
<input type="file" id="file1" onchange="dochange(event);"><img
id="img1" src="" style="width:200px;height:150px;">
javascript側
function readfile(file) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = loaded;
reader.onerror = error;
}
function loaded(event) {
var str = event.target.result;
document.getElementById("img1").src = str;
}
・html5の File API を使って、アップロード無しで画像プレビュー
http://d.hatena.ne.jp/favril/20100506/1273143063
・html5 の File API を使って、ローカルのテキストファイルを読み込む
function read (ele) {
if (!ele.files.length) return;
var file = ele.files[0];
if (!/^text\//.test(file.type)) return; // text/plain, text/html, ...
var fr = new FileReader();
fr.onload = function () {
document.getElementById('text').value = fr.result; // 読み込み結果をtextareaに
};
fr.readAsText(file); // ファイルをテキストとして読み込む
}
http://d.hatena.ne.jp/favril/20100512/1273670339
・第3回Webkit/HTML5勉強会 - File APIと加速度センサー
イベントリスナーの登録や、ドラッグ、ドロップ時の処理など。
Firefox 3.6のみ対応
http://www.slideshare.net/nakamura001/3webkithtml5-file-api-3208806
— posted by midilin @ 09:10AM
最近のコメント