ＳＱＬの窓
<< Google ドライブの … | TOP | Google Chrome で I… >>

2016年09月09日


jQuery と FileReader オブジェクトによる、ローカルの複数画像ファイルのプレビュー表示

 
INPUT 要素の type="file" 属性に加えて multiple 属性を追加する事によって、ローカルのファイルを複数選択が可能になります。

ここでは、画像表示を前提としていますが、ファイルの種類を accept 属性によって指定が可能です。指定方法もいろいろあるので、コンボボックスで選択可能にしました。
(ファイルを選択するダイアログで、accept 属性に指定したファイルグループが作成されて選択された状態になります)

ファイル選択後の処理の流れ

ファイルを選択後、INPUT 要素のオブジェクトの files プロパティに複数のファイルの情報がセットされるので、その配列に対して for ループ処理を作成します。

一回のループ毎に FileReader オブジェクトを作成して、それに対するイベントを登録します。そして、その FileReader オブジェクトに readAsDataURL で、INPUT 要素が保持する各ファイルの blob オブジェクトをセットします。

そうすると、イベントが実行されて、jQuery の appendTo メソッドによって、それぞれの画像用の img 要素が作成されて行きます。

イベント内でオリジナルファイル名を参照する

FileReader オブジェクトに name プロパティとして this.files[i].name をセットしておくと、後から this で参照が可能になります( ここでは title 属性にセットしました )


<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(function(){
	$("#myfile").on("change", function(){

		$("#images").html("");
		for( i = 0; i < this.files.length; i++ ) {

			// FileReader は毎回作成(同時に複数のファイルを扱えない)
			var reader = new FileReader();
			// オリジナルファイル名をプロパティとして追加しておく
			reader.name = this.files[i].name;

			// FileReader に画像が読み込まれた時のイベント
			$(reader).on("load", function () {
				// div の中に img 要素を追加してその都度 this.result(ArrayBuffer) をセット
				$("<img>").appendTo("#images")
				.prop( {"src": this.result, "title": this.name } )	// title にはオリジナルファイル名
				.css("width", "100px");
			});

			// 上記イベントを発動するための処理( this.files[i] は blob )
			if (this.files[i]) {
				reader.readAsDataURL(this.files[i]);
			}
		}

	});

	// ファイルの種類の選択
	$("#accept").on("change", function(){
		$("#myfile").prop("accept", $(this).val() );
	});
});

</script>
<select id="accept">
<option value="image/jpeg">MIME 指定 image/jpeg</option>
<option value="text/plain">MIME 指定 text/plain</option>
<option value=".txt,.jpg,.png,.zip">拡張子指定 .txt,.jpg,.png,.zip</option>
<option value="image/*">画像全て image/*</option>
<option value="video/*">動画全て video/*</option>
<option value="audio/*">音声全て audio/*</option>
</select>
<br>
<input type="file" id="myfile" multiple accept="image/jpeg">
<div id="images"></div>




デモ実行
タグ：jquery FileReader
【jQueryの最新記事】
posted by lightbox at 2016-09-09 17:18 | jQuery | このブログの読者になる | 更新情報をチェックする



Powered by Seesaa
container 終わり



✅ フリーフォントで簡単ロゴ作成
✅ フリーフォントでボタン素材作成
✅ フリーフォントで吹き出し画像作成
✅ フリーフォントではんこ画像作成
✅ ほぼ自由に利用できるフリーフォント
✅ フリーフォントの書体見本とサンプル
✅ 画像を大きく見る為のウインドウを開くボタンの作成
✅ CSS ドロップシャドウの参考デモ
✅ イラストAC
✅ ぱくたそ
✅ 写真素材 足成
✅ フリーフォント一覧
✅ utf8 文字ツール
右サイド 終わり
base 終わり