[jQuery] input file 초기화 버튼 생성, 초기화 하기

input file 선택

input file 업로드 시 초기화버튼 생성

초기화

 

HTML

<input type="file" class="fileInput">
<button class="fileResetBtn">초기화</button>

jQuery

function btnHidden() {
    $(".fileResetBtn").attr("style", "display:none");
}

$(function() {
    // 버튼을 숨긴다
    btnHidden();

    // 파일 업로드가 될 때 버튼을 생성한다.
    $(".fileInput").on("change", function() {
        if ($(this).val() != "") {
            $(this).siblings(".fileResetBtn").attr("style", "display:block");
        } else {
            btnHidden();
        }
    });

    // 버튼을 누르면 파일 값을 없앤다
    $(".fileResetBtn").click(function() {
        $(this).siblings(".fileInput").val('');
        $(this).attr("style", "display:none");
    });
});