Script + JQuery + CSS

	 Javascript > input type="file" 관련 예제들 
	
	
	1. type="file" 선택된 파일 초기화
	


	

		
		if (/(MSIE|Trident)/.test(navigator.userAgent)) { 
			// ie 일때 input[type=file] init.
			$("#board_fname1").replaceWith( $("#board_fname1").clone(true) );
		} else {
			 // other browser 일때 input[type=file] init.
			$("#board_fname1").val("");
		}

	

	
	     클릭하세요  

	
	2. 특정확장자 만  선택받는 방법
	
		- accept 에 확장자만 써주면 된다. 여러 확장자 선택는 콤마(,)로 구분한다.
		


			<input type="file" name="fname" accept=".jpg,.jpeg,.png,.gif,.bmp">

		

	
	3. input file 사용시 카메라 호출방법 
	

		모바일 웹에서 이미지 업로드 기능을 사용하는 경우가 있습니다.

		이미지 업로드 기능 호출 시 카메라 호출하는 법에 대해 쓰겠습니다.

		흔히 input file을 사용할때	<input type="file"/>

		type만 file로 옵션을 주는데, 이럴 경우 LG 단말기나, 베가 단말에서는 카메라 라는 항목이 보이지 않을 수 있습니다.

		하지만 
			

			<input type="file" accept="image/*;capture=camera"/>
			

		또는
			

			<input type="file" accept="image/*" capture="camera"> 
			

 
		accept 에 파일 형식을 쓰고, capture 항목에 camera 라고 써주면 직접 카메라가 호출되는 것을 볼 수 있습니다.

		안드로이드의 경우 둘다 잘 동작되며 아이폰에서는 후자의 경우에만 카메라로 연결이 됩니다.

	
	4. input file 사용시 여러파일 동시에 선택하기
	
		- multiple 만 써 주면 됩니다.
		
		

		<input type="file" multiple>
		
 
	
	5. 선택파일 용량 확인하기
	
		- onchange 시 이벤트 처리합니다.
		- 파일선택시 FileSizeChk() 이벤트 발생합니다.

		

			function FileSizeChk()
			{
				var File_Size = document.getElementById("board_fname2").files[0].size;
				alert(File_Size2);
			}
		

		    


	
	6. 선택이미지 미리보기 기능
	
		- 파일선택시 LoadImg() 함수이 호출딥니다.
		
		
		
		function LoadImg(value) 
		{
			if(value.files && value.files[0]) 
			{
				var reader = new FileReader();

				reader.onload = function (e) {
					$('#LoadImg').attr('src', e.target.result);
				}
			
				reader.readAsDataURL(value.files[0]);
			}
		}
		

		

		이미지파일을 선택해 보세요. 이미지는 아래 표시됩니다.
		
	
	


	
	7. 선택된  파일에서 파일명만 축출   -jquery 이용
	
		

			$(document).ready(function(){
				var fileTarget = $('.filebox .upload-hidden');

				fileTarget.on('change', function(){  // 값이 변경되면
					if(window.FileReader){  // modern browser
						var filename = $(this)[0].files[0].name;
					} 
					else {  // old IE
						var filename = $(this).val().split('/').pop().split('\\').pop();  // 파일명만 추출
					}

					// 추출한 파일명 삽입
					$(this).siblings('.upload-name').val(filename);
				});
			}); 
		

		

		  

		  업로드