input type="file" 관련 예제들
페이지 정보
작성자 서방님 댓글 0건 조회 96회 작성일 16-10-20 17:57본문
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);
});
});
업로드
댓글목록
등록된 댓글이 없습니다.
