jquery 파일첨부관련 질문있습니다!
본문
파일찾기 버튼을 눌러서 파일들을 1개 또는 여러개 첨부하면 placeholder를 첨부한 파일명으로 교체시키고싶어요
$("#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);
})
위 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>
이것때문에 하루종일 고생했는데 알려주셔서 정말 감사합니다!!
답변을 작성하시기 전에 로그인 해주세요.
