webを使ってパソコン上にあるローカルファイルをドラッグ＆ドロップで操作することができる。 ローカルファイルをパソコン上で処理するために、わざわざwebを使って処理する必要はない。 ローカルファイルの内容をサーバに送ったりしたり、サーバでの処理結果をローカルファイルに保存したりするときに用いる操作に使える。
ソースコード
// ドロップ領域のdiv要素
var dp = null;
// ファイルロード進捗表示領域のdiv要素
var prog = null;
// ファイル情報表示領域のdiv要素
var info = null;
// ファイルの内容表示領域のdiv要素
var cont = null;
// 読み取り中止ボタンのbutton要素
var abrt = null;
// FileReaderインターフェースオブジェクト
var reader = null;
/* ----------------------------------------------------------------------*/
/* ページがロードされたときの処理 */
/* ----------------------------------------------------------------------*/
window.addEventListener("load", function() {
// ドロップ領域のdiv要素
dp = document.querySelector('#dp');
// ファイルロード進捗表示領域のdiv要素
prog = document.querySelector('#prog');
// ファイル情報表示領域のdiv要素
info = document.querySelector('#info');
// ファイルの内容表示領域のdiv要素
cont = document.querySelector('#cont');
// 読み取り中止ボタンのbutton要素
abrt = document.querySelector('#abrt');
// dragoverイベントのイベントリスナーをセット
dp.addEventListener("dragover",function(evt){
evt.preventDefault();
},false);
// dropイベントのイベントリスナーをセット
dp.addEventListener("drop",function(evt){
evt.preventDefault();
file_droped(evt);
},false);
// 中止ボタンにclickイベントのイベントリスナーをセット
abrt.addEventListener("click",abort,false);
},false);
/* ----------------------------------------------------------------------*/
/* ファイルがドロップされたときの処理 */
/* ----------------------------------------------------------------------*/
function file_droped(evt){
// 表示領域をクリア
info.innerHTML = "";
prog.innerHTML = "";
cont.innerHTML = "";
// ドロップされたファイルのFileインタフェースオブジェクト
var file = evt.dataTransfer.files[0];
if( !file ){
info.innerHTML = "<p>ファイルをドロップして下さい。</p>";
return;
}
// FileReaderインタフェースオブジェクト
reader = new FileReader();
// ファイルロードの進捗表示
reader.onprogress = function(evt){
if(evt.lengthComputable == true && evt.total>0){
var rate = (evt.loaded * 100 / evt.total).toFixed(1);
var msg = "";
msg += evt.total + "バイト中、 ";
msg += evt.loaded + "バイトをロードしました。";
msg += "(" + rate + "%)";
prog.innerHTML = msg;
}
}
// プロパティを表示
var msg = "";
msg += "size: " + file.size + "\n";
msg += "name: " + file.name + "\n";
msg += "type: " + file.type + "\n";
info.innerHTML = msg;
// 画像ファイル（SVGも含む）の場合
if( /^image/.test(file.type) ){
reader.readAsDataURL(file);
reader.onload = function(evt){
var el = document.createElement("object");
el.setAttribute("type",file.type);
el.setAttribute("data",reader.result);
cont.appendChild(el);
}
// ビデオファイルの場合
}else if( /^video/.test(file.type) ){
var el = document.createElement("video");
if( !/^(maybe|probably)/.test(el.canPlayType(file.type)) ){
return;
}
reader.readAsDataURL(file);
reader.onload = function(evt){
el.setAttribute("type",file.type);
el.setAttribute("src",reader.result);
el.setAttribute("controls",true);
}
// テキストファイルの場合
}else if(/^text/.test(file.type)){
reader.readAsText(file);
reader.onload = function(evt){
cont.appendChild(document.createTextNode(reader.result));
}
// 上記以外なら先頭の40バイト分を16進数表示
}else{
reader.readAsArrayBuffer(file);
reader.onload = function(evt){
var bytes = new Uint8Array(reader.result);
var str = "";
for( var i=0, len=Math.min(bytes.length,40); i<len; i++){
str += ( "0" + bytes[i].toString(16) ).slice(-2);
str += ( (i+1) % 16 == 0 ) ? "\n" : " ";
}
cont.appendChild(document.createTextNode(str));
}
}
}
/* ----------------------------------------------------------------------*/
/* ファイルのロードを中止 */
/* ----------------------------------------------------------------------*/
function abort(){
if(reader == null){
return;
}
reader.abort();
}
</script>
</HEAD>
<BODY>
<div id="dp">
<div id="prog">ここにデスクトップ上のファイルをドロップしてください</div>
<div><button id="abrt">読み取り中止</button></div>
<div id="info"></div>
<div id="cont"></div>
</div>
サンプル
ここにデスクトップ上のファイルをドロップしてください