mugyu
5/15/2014 - 8:00 AM

イメージファイルをドロップして表示(未検証)

イメージファイルをドロップして表示(未検証)

jQuery.event.props.push("dataTransfer");
$("body").on("drop", function(event) {

	// イベントバブリングの抑止
	event.preventDefault();

	// Filesが存在している場合
	// ファイルのドロップ時に
	// ファイル名とファイルドロップパネルの描画
	$.each(event.dataTransfer.types, function(index, type){

		// ファイルか判定
		if (type === "Files") {
			var files = event.dataTransfer.files

			// イメージファイルか判定
			if (files[0].type.match("^image\/")) {

				// イメージのレンダー
				var filereader = new window.FileReader();
				filereader.onload = function() {
					$("#display-area")
						.empty()
						.append($("<img>").attr("src", this.result));
				};
				filereader.readAsDataURL(files[0]);
			}
		}
	})

  // イベントバブリングの抑止
  return false;
}).on("dragenter dragover", false);