HTML5 でローカルファイルの取り込みを試してみたよ!

2013 年 8 月 17 日 土曜日 by Koh(3,367 views)

addEventListener  

HTML5では、パソコンに保存してあるファイルをJavaScriptのブログラムから扱えるようになりました。今までもファイルのアップロードは可能でしたが、取り込んだファイルのチェック等は、サーバー側で行う事しかできませんでした。HTML5になりファイルの扱いが容易になり、ファイルの種類やサイズ等をJavaScript上で判断することが可能となりました。まあ、サーバー側でチェックした方がセキュリティ的に安全という意見もありますが、とりあえず実験!

 

今回のファイル取り込み仕様は以下の通り。

 
仕様
画像ファイルを所定の場所にドラッグ&ドラッグすることで、画像ファイルを当ページにプレビュー表示する。また、ドラッグしたファイルが画像ファイル以外の場合はエラーとする。
 

では、以下にパソコンに保存してある画像ファイルをドラッグ&ドロップしてみてください。

 
ここにプレビューする画像ファイルをドラッグ&ドロップしてください。
画像プレビュー欄
   

ドロップした画像が、当サイトに表示されましたでしょうか?表示されない場合は、ブラウザーにChrome、または、FireFox、Safariを使用して再度お試しください。

 

ちなみに、プレビュー表示された画像は、サーバーにアップロード(ネット公開)された訳ではなく、パソコンにある画像ファイルをブラウザーで表示しているだけです。ご心配なく。

 

では、ソースを以下に添付しておきます。今回もスタイルシート部分は省いています。

 
<div id="dropSpace">ここにプレビューする画像ファイルをドラッグ&ドロップしてください。</div>
<image id="uploadPreview" src="">
<script>
var fileReader = new FileReader();

function DRP(evt) {
evt.preventDefault();

var files = evt.dataTransfer.files;
if (files[0].type.indexOf("image") == -1) {
alert("画像ファイルをドロップしてください。");
} else {
fileReader.readAsDataURL(files[0]);
}
}

function DRO(evt) {
evt.preventDefault();
}

fileReader.onerror = function(evt) {
alert("ファイルの読み込みに失敗しました。");
}

fileReader.onload = function(evt) {
document.getElementById("uploadPreview").src = evt.target.result;
}

var dropSpace = document.getElementById("dropSpace");
dropSpace.addEventListener("dragover", DRO, false);
dropSpace.addEventListener("drop", DRP, false);

</script>
   





コメントは受け付けていません。


Mobile Site Link