主にプログラミングに関して。Python, .NET Framework(C#), JavaScript, その他いくらか。
記事にあるサンプルやコードは要検証。使用に際しては責任を負いかねます

スポンサーサイト

                
tags:
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Javascriptでローカルファイルを読み込んで表示

                
tags:
HTML5 Rocks

上のサイトのデモを試した。FileReaderを使ってローカルファイルを読み込んで表示するというもの。

サンプルコードをhtmlファイルにして、ブラウザにドラッグ&ドロップして実行しても動かないブラウザがあった(Operaは動いてChromeは動かなかった)。サーバーを立ち上げ、サーバーを介してhtmlファイルにアクセスしたところ問題なく動いた。

しかしOperaでの画像読み込みに問題が生じた。画像を繰り返し読み込んでいる際、直前の読み込みがなんらかの形でのこっているのか、前回に指定した画像まで読み込まれる。ファイル名リストを作って重複を避けるように書き換えた。


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.thumb {
width: auto;
height: 75px;
border: 1px solid #000;
margin: 10px 5px 0 0;
}
</style>
</head>
<body>
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

<script>
FILELIST = [];

function handleFileSelect(evt) {
var files = evt.target.files; // FileList object

// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
// alert(f.name)

// Only process image files.
if (!f.type.match('image.*')) {
continue;
}

if ((FILELIST.indexOf(f.name) >= 0)) {
continue;
}
FILELIST.push(f.name);
var reader = new FileReader();

// Closure to capture the file information.
reader.onload = (function(theFile, num) {
return function(e) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML = ['<img id="', num, '" class="thumb" src="', e.target.result,
'" title="', escape(theFile.name), '"/>'].join('');
document.getElementById('list').insertBefore(span, null);
};
})(f, i);

// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
</body>
</html>
            

コメントの投稿

非公開コメント

プロフィール

hMatoba

Author:hMatoba
Github

最新記事
リンク
作ったものなど
月別アーカイブ
カテゴリ
タグリスト

検索フォーム
Amazon
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。