サンプル
Google Chromeではセキュリティ上、ローカルのHTMLファイルから他のローカルファイルの内容にアクセスする場合には、
ファイル読み込み自体を許可する「--allow-file-access」フラグと、
ローカルファイルからのファイル読み込みを許可する「--allow-file-access-from-files」フラグの両方を付けて起動する必要があります。
Windowsの場合は以下のようになります。
＜Google Chromeのインストールフォルダ＞\chrome.exe --allow-file-access --allow-file-access-from-files
サンプル2、サンプル3を、ローカルファイルとして実行する場合は、Google Chromeについては上記フラグを付けて起動したうえで実行してください。
サンプル1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル1 選択した複数ファイルの属性を表示する</title>
<script type="text/javascript">
// ファイル選択時のコールバック関数
function onFilesSelected(){
var input = document.getElementById("fileInput");
var info = document.getElementById("fileInfo");
info.innerHTML = "<hr>";
// すべての選択されたファイルについて処理
for(var i = 0; i < input.files.length; i++){
// files属性からファイルへの参照を取得
var f = input.files[i];
info.innerHTML += "ファイル名: " + f.name
+ "<br>MIMEタイプ: " + f.type + "<br>サイズ: " + f.size + "bytes <hr>";
}
}
</script>
</head>
<body>
<p>任意のローカルファイルを選択すると、選択したファイルの属性が表示されます。</p>
<p>複数選択も可能です。</p>
<input type="file" id="fileInput" multiple onchange="onFilesSelected()">
<div id="fileInfo"></div>
</body>
</html>
サンプル2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル2 選択された画像ファイルを表示する（IE、Safariは未実装）</title>
<script type="text/javascript">
// 画像ファイル読み込み完了時のコールバック関数
function onImageLoad(event){
var image = document.getElementById("targetImage");
// 読み込んだData URLをsrcに設定
image.src = event.target.result;
}
// ファイル選択時のコールバック関数
function onFilesSelected(){
var input = document.getElementById("fileInput");
// files属性からファイルへの参照を取得
var f = input.files[0];
var reader = new FileReader();
reader.onload = onImageLoad;
// Data URL として読み込む
reader.readAsDataURL(f);
}
</script>
</head>
<body>
<p>選択した画像ファイルを表示します</p>
<p><input type="file" id="fileInput" onchange="onFilesSelected()"></p>
<p><img id="targetImage"></p>
</body>
</html>
サンプル3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サンプル3 ドラッグ＆ドロップされたテキストファイルを表示する（IE、Safari、Operaは未実装）</title>
<script type="text/javascript">
try{
// テキストファイル読み込み完了時のコールバック関数
function onTextLoad(event){
var text = document.getElementById("textBox");
text.innerHTML = event.target.result;
}
// ドラッグ開始時のコールバック関数
function cancelDefault(event){
//ブラウザの既定の挙動を抑制
if (event.preventDefault) {
event.preventDefault();
}
}
// ドロップ時のコールバック関数
function onFileDrop(event){
//ブラウザの既定の挙動を抑制
if (event.preventDefault) {
event.preventDefault();
}
// files属性からFile参照を取得
var f = event.dataTransfer.files[0];
var reader = new FileReader();
reader.onload = onTextLoad;
// テキストとして読み込み
reader.readAsText(f,"shift_jis");
return false;
}
}catch(e){
console.log(e);
}
</script>
</head>
<body>
<p>
灰色の四角にローカルのテキストファイルをドラッグ＆ドロップすると、<br>
下のテキストボックスに内容が表示されます。<br>
（Shift_JISとして読み込みます）
</p>
<div
id="targetZone"
ondragover="cancelDefault(event)"
ondrop="onFileDrop(event)"
style="height:300px;width:300px;background-color:silver;">
</div>
<textarea id="textBox" cols="100" rows="30" ></textarea>
</body>
</html>
関連項目
（関連する項目はありません）
