개발 후 테스트를 진행하던 중 다양한 브라우저에서 테스트를 하다가 발견하게 되었다.
일단 소스를 보면 알겠지만, input태그의 file이 좀 올드(?) 해서 스타일을 먹이기 위해 파일 첨부 여부에 따라 버튼에 스타일을 준 상태이다.
물론 스크립트로 작성되어있다!
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<tr>
<th>첨부파일1</th>
<td>
<input type="file" name="testfile" onchange="check(this); return false;" style="display: none" accept=".pdf, .jpg, .jpeg, .png, .gif, .txt"/ >
<div>
<input type="text" readonly="readonly" placeholder="선택된 파일 없음"/>
<span>
<img src="커스텀 이미지" style="vertical-align: middle; cursor: pointer;" title="첨부"/>
</span>
<span onclick="파일삭제(this); return false;" style="display: none">
<img src="커스텀 이미지" style="vertical-align: middle; cursor: pointer;" title="삭제"/>
</span>
</div>
<p>*pdf, jpg, jpeg, png, gif, txt 및 오피스파일 형식의 10MB이하를 첨부하실 수 있습니다.</p>
</td>
</tr>
Colored by Color Scripter
|
다른 브라우저에서는 정상적으로 돌아갔지만..! IE 9에서는 콘솔창에 에러가 발생하였다
정의되지 않은 또는 null 참조의 속성 0을 가져올 수 없습니다.
개발자 도구를 통한 웹 디버깅을 했을 때 스크립트의
var file = f.files;
코드가 문제라는 점을 확인했다. 파일 첨부 클릭 후 선택했을 때 해당 파일에 대한 정보를 못가져오는 문제였다.
해당 이슈는 다른 개발자도 겪었던 것 같았다.
문제 해결을 위해..구글링과 스택오버플로를 뒤적거리던 와중에 관련 게시글을 찾게 되었다
즉, addEventListener를 이용해서 파일(file)객체에 접근하는 식이었다.
하지만 페이지 진입 시...오류 팝업이 등장..ㅠㅠㅠ
짜여진 스크립트와 함께
파일 선택 후 동작을 디버깅을 하면서 어떤 객체에 정보가 담기나 다시 확인하던 중..
기존 소스가 file[0]의 이름과 사이즈를 체크하고 있었다.(ex. 이름 형식 : abc.txt)
즉, var file = f.files; 를 할 필요 없이
파라미터로 넘어온 'f'를 보고 그것의 이름, 사이즈를 보면 되는 것이었다!
(내 삽질..)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
/* 파일 체크 (간략 ver) */
function checkFile(f) {
// .files 는 IE9에서 지원하지 않음.
var testStr = f.value; // 파일명
if (testStr == null || typeof testStr == "undefined" ) {
return;
}
$(f).siblings('div').find("input[type='text']").val(f.value.substring(f.value.lastIndexOf('\\')+1));
$(f).siblings('div').find(".fileIns").hide();
$(f).siblings('div').find(".fileDel").show();
$(f).attr('title', testStr);
}
Colored by Color Scripter
|
input 태그 타입이 file인 경우 서버로 업로드 할 수 있는 파일 타입을 설정해 줄 수 있다.
타입이 file인 경우에만 사용할 수 있다고 하니 참고!
<input type="file" name="테스트" accept=".pdf, .jpg, .jpeg, .png, .gif, .txt"/>
위와같이 파일 확장자도 쓸 수 있고 다른 방식도 사용 가능하다.
주의할 점은 지원하는 브라우저 & 버전을 확인해야 한다
보다 자세한 내용은 아래 링크를 확인하면 된다!
추가로 타입이 file 일때 multiple 옵션이 적용되는
브라우저 & 버전은 아래에서 확인할 수 있다
'Java & JSP' 카테고리의 다른 글
| EL & JSTL (0) | 2019.06.02 |
|---|---|
| @SuppressWarnings..? (0) | 2019.05.26 |
| Java Generic & Collection Framework(제네릭&콜렉션 프레임워크) (0) | 2019.05.22 |
댓글