[JQuery] HTML 파일 업로드

HTML로 파일을 업로드 할려면 input 태그의 type이 file 이여야 한다.

하지만 이렇게 쓰면 디자인 커스텀이 쉽지않다.

그래서 이 태그는 display:none으로 처리하고, js나 jquery로 연결하여 처리한다.

<button type="submit" id="inputfile">Upload input file</button>
<input type="text" readonly="readonly" id="inputfile2" name="inputfile2">
<input type="file" style="display:none" id="inputfile3" name="IFILE" ></input>

$(document).ready(function(){
    $("#inputfile").click(function(){
        $("#inputfile3").click();
        return false;
    })
    $("#inputfile3").change(function(){
        $("#inputfile2").val($("#inputfile3").val());
    })
});

엄청나게 중요한점은 File을 업로드할때는 form 태그가 다음과같이

<form method="post" action="#" ENCTYPE="multipart/form-data">

ENCTYPE="multipart/form-data"가 있어야한다.

이거때문에 3시간 삽질을 했다.