[HTML][JavaScript][jquery]IE 호환 가능 파일 업로드 구현

프로젝트를 진행하던 와중에 IE에 대해서 호환가능하게 하라는 지침이 있어 기존 코드를 수정하였다.

 

기존코드

- IE에서 label이 작동하지 않아 button과 input type = "file"이 연결되지 않아 동작을 안한다.

<td colspan="3">
	<div class="mu-file-attach">
		<input type="text" id="file-name" placeholder="파일 첨부 크기는 최대 100MB까지 가능합니다.">
		<div class="mu-file-btn">
			<button type="button">
				<label for="file-find">파일선택</label>
			</button>
            <!-- input 안보이게 클래스 설정 -->
			<input type="file" id="file-find" name="file" class="mu-btn-hide" onchange="javascript: document.getElementById('file-name').value = this.value">
		</div>
	</div>
</td>

 

수정코드

HTML

<td colspan="3">
    <div class="mu-file-attach">
        <input type="text" id="file-name" placeholder="파일 첨부 크기는 최대 100MB까지 가능합니다.">
        <div class="mu-file-btn">
            <button type="button" id="btn-upload">
                <label for="file-find">파일선택</label>
            </button>
            <!-- input 안보이게 클래스 설정 -->
            <input type="file" id="file-find" name="file-find" class="mu-btn-hide" onchange="changeValue(this)"/>
        </div>
    </div> 
</td>

JavaScript

- jqeury도 추가해 주어야 한다.

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
	//파일 선택 버튼
	$('#btn-upload').click(function (e) {
		e.preventDefault(); //버튼 클릭 시 summit을 막아준다.
		$('#file-find').click();
	});
	//파일 명 text 노출 
	function changeValue(obj){
		$("#file-name").val(obj.value);
    }
</script>

 

끝