ドラッグして画像アップロード＆クリックで画像アップロード＆アップロードした画像を即座に表示


#はじめに

なんか出来ちゃったので配布。
使うアテがないので供養のつもり。

編集リクくれたら解説とかするかも。



#サンプル

<p class="codepen" data-height="365" data-theme-id="default" data-default-tab="js,result" data-user="yomogenium" data-slug-hash="VwYZrqO" style="height: 365px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="VwYZrqO">
  <span>See the Pen <a href="https://codepen.io/yomogenium/pen/VwYZrqO">
  VwYZrqO</a> by Yomogenium (<a href="https://codepen.io/yomogenium">@yomogenium</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>





#コード

※全部1本にまとめてあります


```html:test.html


<style>

#imageframe{
	width: 300px;
	height: 400px;
	border: 1px solid black;
	background-image: url(./hogehoge.png);
	background-repeat: no-repeat;
	background-size: contain;
}
</style>

	<form action="hoge.html" method="post" accept-charset="UTF-8" enctype="multipart/form-data">
		<div class="portlate" id="imageframe">
			<input type="file" name="imgfile" value="" accept="image/png,image/jpeg,image/gif" multiple>
		</div>
	</form>


<script type="text/javascript">
(function(){
	'use strict';

	var imageflame = document.getElementById('imageframe');
	var imageinput = document.querySelector('#imageframe input[name="imgfile"]');
	imageinput.style.display = "none";

	// 画像をドラッグしたとき、それを読み込みつつ表示

		// ファイルがドロップされたとき、そのファイルのアップロード処理を実行しつつ、クラス削除
	    imageflame.addEventListener('drop', function(event){
	    	event.preventDefault();

	    	// クラス削除
	    	imageflame.classList.remove('dropover');

	    	// ドロップファイルを変数に格納
	    	var files = event.dataTransfer.files;
	    	// ファイルそのものをinputに格納
	    	imageinput.files = files;

	    	// 読み込んだ画像を表示
	    	for(var i = 0; i<files.length; i++){
	    		var file = files[i];

				var reader = new FileReader();
				reader.onload = function(elem) {
					// 引数のelemはドラッグ中のファイルではなく、読み込みされた時点でのファイル。
					imageflame.style.cssText = "background-image: url(" + elem.target.result + ");";
				};
				reader.readAsDataURL(file);
	   
	    	}

	    });

	    // ドラッグ中のファイルがimageflameの上に来ていたらクラス追加しつつ、ドロップの許可を出す
	    imageflame.addEventListener('dragover', function(event){
	    	event.preventDefault();
	    	imageflame.classList.add('dropover');

	    	// ドラッグ中のファイルの属性を変更し、ドロップ可能にする
	    	event.dataTransfer.dropEffect = 'copy';
	    });

	    // ドラッグ中のファイルがimageflameの上から離れたらクラス削除
	    imageflame.addEventListener('dragleave', function(){
	    	imageflame.classList.remove('dropover');
	    });

	// クリックしたときに「ファイルを選択」を起動
	imageflame.addEventListener('click', function(){
		imageinput.click();
	});

	// 画像が挿入されたとき、その画像を表示する
	imageinput.addEventListener('change', function(event){

		var reader = new FileReader();
		reader.onload = function(event){
			imageflame.style.cssText = "background-image: url(" + event.target.result + ");";
			console.log(event.target.result);
		}
		reader.readAsDataURL(event.target.files[0]);
	});


})();
</script>
```






#参考文献

http://koheik.hatenablog.com/entry/2016/07/08/152936
https://qiita.com/ginpei/items/5cebb14e210fc0770e94
https://qiita.com/FiNGAHOLiC/items/4bddee7b0bfe9555636a