画像ファイルの場合、追加して表示します。
サンプル
◆html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>File API Sample (onDrop)</title>
<script src="onDrop.js"></script>
<style>
html,body {
margin: 0px;
padding: 0px;
height: 100%;
}
#drop img {
height: 75px;
border: 1px solid #000;
margin: 10px 5px 0 0;
float: left;
}
</style>
</head>
<body>
<div>下にファイルをドロップしてください。ファイルを表示します。</div>
<div id="drop" style="width:95%; height:90%;" ondragover="onDragOver(event)">
</div>
</body>
</html>
◆javascript(FileInput.js)
25-31行目：ファイルが画像の場合の処理（height=75pxの大きさで画像を表示）34-39行目：ファイルが画像以外の場合の処理（テキストを表示）
window.onload = function() {
if (window.File) {
// File APIに関する処理を記述
// window.alert("File APIが実装されてます。");
document.getElementById("drop").addEventListener("drop", onDrop, false);
} else {
window.alert("本ブラウザではFile APIが使えません");
}
}
// Drop領域にドロップした際のファイルのプロパティ情報読み取り処理
function onDrop(event){
var files = event.dataTransfer.files;
var drop = document.getElementById("drop");
// ファイルの配列から1つずつファイルを選択
for(var i=0; i< files.length; i++){
var f = files[i];
// FileReaderオブジェクトの生成
var reader = new FileReader();
// エラー発生時の処理
reader.onerror = function (evt) {
drop.innerHTML = "読み取り時にエラーが発生しました。";
}
if (f.type.match('image.*')) {
reader.onload = function (evt) {
var img = document.createElement('img');
img.src = evt.target.result;
document.getElementById("drop").appendChild(img);
}
// readAsDataURLメソッドでファイルの内容を取得
reader.readAsDataURL(f);
} else {
// ファイル読取が完了した際に呼ばれる処理
reader.onload = function (evt) {
var content = reader.result.replace(/</g,'<')
drop.innerHTML = content;
}
// readAsTextメソッドでファイルの内容を取得
reader.readAsText(f);
}
}
// ブラウザ上でファイルを展開する挙動を抑止
event.preventDefault();
}
function onDragOver(event){
// ブラウザ上でファイルを展開する挙動を抑止
event.preventDefault();
}
参考にしたページ
以上
