JQuery (File/Image) 파일/이미지 입력(File Input) 체크

2016-08-30 15:43:31

언제부터인가 브라우저에서 직접 파일 경로를 숨기면서 파일 컨트롤이 어렵게 변했다. 가 아니라 파일 경로를 바로 따올수 없으니 그게 좀 불편한거다 ^_^..

객체를 사용하면 파일 경로를 알아내는건 그다지 어려운 일도 아니라서. 과연 그게 보안에 실효성이 있는지는 잘 모르겠다. 외부에서 껴들어온 스크립트에서는 보안에 좋을지도.. 과연 해커가 그정도로 착할지가 ㅋㅋ

물론 객체를 사용하면 파일 정보들도 얻어올수 있기 때문에 나름 괜찮지만.. 단순히 파일 경로를 알아내기 위해 객체를 사용한다는 것이 마트를 나가기 위해 세단을 몰고나가는 느낌이라서 그게좀.. 아직 적응하기 힘들기는 하다 ㅎㅎ

이게 또 초보자들한테는 어려운 부분이다 카더라가 아니라 실제로 그러했다 ㅋㅋ 내가 그랬으니까~

## 소스는 jQuery .number 플러그인이 같이 사용되어 있다.

<div class="formDivList formImageBig">
	<input type="file" name="item_image" id="itemImage" class="Hidden">
	<table class="TableList">
		<tr>
			<td><img src="/images/objects/cameraView.png" id="itemImageSrc" align="absbottom" border="0" onclick="formUploadCheck('#itemImage','/images/objects/cameraView.png');" /></td>
			<td>
				<div class="formDivSubList" id="itemImageCaution" class="Hidden"></div>
				<div class="formDivSubList">파일크기 : <span id="itemImageSize">0</span> byte</div>
				<div class="formDivSubList">이미지크기 : <span id="itemImageImgSize">0&times;0</span></div>
				<div class="formDivSubList">
					<a class="InputButton" onclick="formUploadCheck('#itemImage','/images/objects/cameraView.png');">이미지 선택</a>
					<input type="checkbox" value="1" name="item_image_no_resave" id="item_image_no_resave_y"  align="absmiddle"/>
					<label for="item_image_no_resave_y" style="vertical-align:absmiddle">JPG 파일 재저장 안하기</label>
				</div>
			</td>
		</tr>
	</table>
</div>


<script>

function formUploadCheck(nid,originalImg)
{
	if(!$(nid)){return;}

	$(nid).one('change', function(event) {

		if(!event.target.files[0]){return;}
		var imgPath=URL.createObjectURL(event.target.files[0]);
		var imgSize=this.files[0].size;
		
		if($(nid+"Src"))
		{
			var imgUrlOld=$(nid+"Src").attr('src');
			if(originalImg){imgUrlOld=originalImg;}
			
			$(nid+"Src").one('error',function(){
				$(nid).val("");
				
				if($(nid+"Src"))
				{
					$(nid+"Src").attr('src',imgUrlOld);
				}
				if($(nid+"ImgSize"))
				{
					$(nid+"ImgSize").html('0&times;0');
				}
				if($(nid+"Size"))
				{
					$(nid+"Size").text('0');
				}
			});	

			$(nid+"Src").attr('src',imgPath);

			var imgWidth=$(nid+"Src").get(0).naturalWidth;
			var imgHeight=$(nid+"Src").get(0).naturalHeight;
			
			if($(nid+"ImgSize"))
			{
				$(nid+"ImgSize").html($.number(imgWidth)+'&times;'+$.number(imgHeight));
			}
		}
		
		if($(nid+"Size"))
		{
			$(nid+"Size").html($.number(imgSize));
			var imgCautionMsg="";
			if(imgSize>(1024*1024*10)){imgCautionMsg='<span style="color:#f44;font-weight:bold;" class="Blink5">파일이 10M가 넘습니다. 포토샵 저장 문제가 있는지 확인하십시오.</span>';}
			else if(imgSize>(1024*1024*5)){imgCautionMsg='<span style="color:#44f;font-weight:bold;" class="Blink">파일이 5M가 넘습니다. 포토샵 저장 문제에 주의하십시오.</span>';}
			else if(imgSize>(1024*1024*2)){imgCautionMsg='<span style="color:#080;font-weight:bold;">파일이 2M가 넘습니다. 주의가 요구됩니다.</span>';}
			if($(nid+"Caution"))
			{
				$(nid+"Caution").hide();
				if(imgCautionMsg)
				{
					$(nid+"Caution").html(imgCautionMsg);
					$(nid+"Caution").show();
				}
			}
		}
		
	}).click();
}
	
window.setInterval(function(){$('.Blink').fadeTo(200, 0.1).fadeTo(200, 1.0);}, 1000);
window.setInterval(function(){$('.Blink5').fadeTo(100, 0.1).fadeTo(100, 1.0);}, 500);

</script>

이건 내가 실제로 이용하고 있는 이미지 업로드 용 폼의 부분을 발췌한거다.

이미지 크기, 파일 크기, 이미지가 아닐시의 처리. 이정도면 다른 곳에서 이용할때 큰 문제는 없다고 생각한다.

유용하게 써먹기를... ^_^..

목록 이전 다음