jsで画像のtype=”file”アップロードと画像のチェック

HTML

<!-- //全角＆を半角にしてテストして！ -->
＆#8238;逆さ文字テスト 

HTML

<!-- //＆#8238;を入力した状態テスト結果 -->
‮逆さ文字テスト

HTML

	<!-- Form -->
	<form class="form" action="#">
		<!-- img_file -->
		<label class="btn_file">
			<input id="img_upload"  type="file" accept="image/gif,image/jpeg,image/jpg,image/png"  /><span id="file_name">ファイルを選択</span>
 		</label >

		
		<label class="btn_file" id="flie_name">
			<input  class="submit"  type="submit"   onchange="setImage()"  value="アップロード">アップロード
 		</label >
	</form>

	<!-- 画像情報表示エリア -->
	<div id="img_info"></div>

Java Script

//-------------------------------
//ファイル読込済のtumbl画像を表示
//--------------------------------
function previewFile(file) {
 	const preview = document.getElementById('img_tumblr'); // プレビュー画像を追加する要素
	const imgbox = preview.firstElementChild;//子要素を取得
	const reader = new FileReader();// FileReaderオブジェクトを作成

	// ファイルが読み込まれたときに実行する
	reader.onload = function (e) {
		const imageUrl = e.target.result; // 画像のURLはevent.target.resultで呼び出せる
		const img = document.createElement("img"); // img要素を作成
		img.src = imageUrl; // 画像のURLをimg要素にセット
		
		//preview.appendChild(img); // #previewの中に追加	 ※要素が増えるappendChild
		imgbox.replaceWith(img);//tumbl画像置き換え

		Get_imgSize();//functin読込
	}//
	reader.readAsDataURL(file);	//ファイルを読み込む
}//

//-------------------------------------
//表示したtumbl画像からサイズを取得する
//--------------------------------------
function Get_imgSize() {
	var div_area = document.getElementById('img_tumblr');
	var img = div_area.firstElementChild;

	var intervalId = setInterval( function () {
		if ( img.complete ) {
			var width = img.naturalWidth ;
			var height = img.naturalHeight ;

			//infoエリアに情報追加
			const p = document.createElement("p");//P要素を作成
			var text = '幅：' + width + ',高さ：'+height + "<br> ";
			p.innerHTML = text;
			const info = document.getElementById('img_info');
			info.appendChild(p);//info内に要素を追加

			clearInterval( intervalId ) ;
		}
	}, 500 ) ;
}//


//-------------------------------------
//type="file"ファイル名を取得する
//--------------------------------------
function Get_imgName(file){
		var name = file.name;
	
		//infoエリアに情報追加
		const p = document.createElement("p");//P要素を作成
		var text = '画像名：'+ name +"<br>";
		p.innerHTML = text;
		const info = document.getElementById('img_info');
		info.appendChild(p);//info内に要素を追加

		//inputのラベルを書き換え
		var set_name =  name.toString();
		if((set_name.length) >  12){
			var set_name = set_name.substr(0, 12) + '...';
		}
		const label = document.getElementById('file_name');
		label.innerText = set_name;//ファイル名をセット
}//


//-----------------------------------------
// <input>でファイルが選択されたときの処理
//------------------------------------------
const fileInput = document.getElementById('img_upload');
const handleFileSelect = () => {
	const files = fileInput.files;
	for (let i = 0; i < files.length; i++) {
		previewFile(files[i]);//functin読込
		Get_imgName(files[i]);
	}
}
fileInput.addEventListener('change', handleFileSelect);