jquery 파일첨부관련 질문있습니다!

jquery 파일첨부관련 질문있습니다!

QA

jquery 파일첨부관련 질문있습니다!

본문

파일찾기 버튼을 눌러서 파일들을 1개 또는 여러개 첨부하면 placeholder를 첨부한 파일명으로 교체시키고싶어요

2040025585_1688518952.9478.png

2040025585_1688518983.4223.png

 


$("#file").on('change',function(){
        let files=$('input[name="file_name"]')[0].files;
        let fl;
        for(let i=0; i<files.length; i++){
            let fl = files[i].name;
            console.log("파일명은 : " + fl);
        }
        console.log("files의 변수타입 : " + typeof(files));
        console.log(files);
    })

2040025585_1688519687.307.png

위 script로 확인해보면 제가 생각했을때는

1. 파일첨부가 확인되면 첨부된 파일들의 name을 변수에 저장한다

 - 파일들의 타입은 object로 저장된다

 - object안에 있는 name의 값을 string형 문자열로 나열하여 다른 변수에 저장한다

2. 변수에 저장된 파일 name들로 placeholder를 바꾼다. 

이렇게 할 수 있지 않을까? 생각은 하는데

아직 초보라 잘 모르겠습니다 알려주세요....

 

이 질문에 댓글 쓰기 :

답변 1


<style>
.upload-name { width: 40em; font-size: 0.9em; padding: 0.4em; }
.file-search { background-color: #36a0e2; color: #fff; font-size: 0.9em; padding: 0.4em; }
#file { visibility: hidden; }
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<div class="fileBox">
    <input class="upload-name" value="첨부파일" placeholder="첨부파일" readonly>
    <label for="file" class="file-search">파일찾기</label>
    <input type="file" name="file_name" id="file" multiple>
</div>
<script>
$("#file").on('change',function(){
    let fval_default = '첨부파일';
    $('.upload-name').val(fval_default);
    let fval = fval_default;
    let files=$('input[name="file_name"]')[0].files;
    let fl;
    for(let i=0; i<files.length; i++){
        let fl = files[i].name;
        console.log("파일명은 : " + fl);
        
        if (fval == fval_default) {
            fval = fl;
        } else {
            fval += ',' + fl;
        }
        $('.upload-name').val(fval);
    }
    console.log("files의 변수타입 : " + typeof(files));
    console.log(files);
});
</script>
답변을 작성하시기 전에 로그인 해주세요.
전체 1,020
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT