そのまま表示

<html>
	<meta http-equiv="content-type" charset="utf-8">
	<head>
		<title>ドラッグ＆ドロップで画像を受け取る</title>
		<link rel="icon" href="/favicon.ico">
	</head>
	<body>
		
	<input id="fileInput" type="file" accept="image/*" value="ファイルを選択" name="photo" onChange="photoPreview(event)">
	<div id="dragDropArea" style="border:dashed;min-height:200px;">
		ここにファイルをドロップ<br>
		<span id="previewArea"></span>
	</div>
	<br>
	↓　動作確認用画像<br>
	<a href="img_dd.png" target="_blank">別ウィンドウで開いた画像をラッグ＆ドロップ</a><br>
	<br>
	参考サイト：<a href="https://qiita.com/tonkatu_tanaka/items/77fd4300f543a4f9682d" target="_blank">https://qiita.com/tonkatu_tanaka/items/77fd4300f543a4f9682d</a> 画像をドラッグ＆ドロップで登録してプレビュー表示<br>
	画像取得元：<a href="https://zunko.jp/con_illust.html" target="_blank">https://zunko.jp/con_illust.html</a> 四国めたん<br>


	<script language="JavaScript">

		var fileArea = document.getElementById('dragDropArea');

		fileArea.addEventListener('dragover', function(evt){
			evt.preventDefault();
			fileArea.classList.add('dragover');
		});

		fileArea.addEventListener('dragleave', function(evt){
			evt.preventDefault();
			fileArea.classList.remove('dragover');
		});

		fileArea.addEventListener('drop', function(evt){
			evt.preventDefault();
			fileArea.classList.remove('dragenter');
			var files = evt.dataTransfer.files;
			console.log("DRAG & DROP");
			console.table(files);
			//fileInput.files = files;
			document.getElementById('fileInput').files = files;
			photoPreview('onChenge',files[0]);
		});

		function photoPreview(event, f = null) {
			
			var file = f;

			if(file === null){
				file = event.target.files[0];
			}

			var reader = new FileReader();
			var preview = document.getElementById("previewArea");
			var previewImage = document.getElementById("previewImage");

			if(previewImage != null) {
				preview.removeChild(previewImage);
			}
			
			reader.onload = function(event) {
				var img = document.createElement("img");
				img.setAttribute("src", reader.result);
				img.setAttribute("id", "previewImage");
				preview.appendChild(img);
			};

			reader.readAsDataURL(file);
		}

	</script>
	
	</body>
</html>
＜＜　広告　＞＞