example - input type="file" 처리에 관한 예제들

출처 : http://ankyu.entersoft.kr/board_Lecture/lecture_content.asp?lecture_idx=248&gubun_type=javascript

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);
				});
			});