파일업로드시 미리보기 제거하는 부분 문의드립니다.
본문
#사진1
#사진2
위 #사진1 처럼 부트 5.0 가져다 사용하고 있는되요.
#사진2처럼 닫기버튼을 누르면,
초기화 하는 부분은 없더라구요.
혹시 리셋 이미지 조언 구합니다.
스크립트는 아래와 같습니다.
// Upload Input
var uploadComponent = document.querySelectorAll('.custom-file-upload');
uploadComponent.forEach(function (el) {
var fileUploadParent = '#' + el.id;
var fileInput = document.querySelector(fileUploadParent + ' input[type="file"]')
var fileLabel = document.querySelector(fileUploadParent + ' label')
var fileLabelText = document.querySelector(fileUploadParent + ' label span')
var filelabelDefault = fileLabelText.innerHTML;
fileInput.addEventListener('change', function (event) {
var name = this.value.split('\\').pop()
tmppath = URL.createObjectURL(event.target.files[0]);
if (name) {
fileLabel.classList.add('file-uploaded');
fileLabel.style.backgroundImage = "url(" + tmppath + ")";
fileLabelText.innerHTML = name;
} else {
fileLabel.classList.remove("file-uploaded")
fileLabelText.innerHTML = filelabelDefault;
}
})
})
위 디자인 처럼 구성된 HTML입니다.
<div class="upload-img-btn">
<div class="upload_btn">
<div class="custom-file-upload" id="fileUpload1">
<input type="file" id="fileuploadInput" accept=".png, .jpg, .jpeg">
<label for="fileuploadInput">
<span>
<strong>
<ion-icon name="cloud-upload-outline" role="img" class="md hydrated" aria-label="cloud upload outline"></ion-icon>
<i>이미지 업로 드</i>
</strong>
</span>
</label>
</div>
</div>
</div>
답변 3
올리신 소스 기준으로는
fileLabelText.innerHTML = filelabelDefault;
이부분 참조해서 구성하면 될것 같습니다.
답변감사합니다.
<label for="fileuploadInput">
<span>
<strong>
<ion-icon name="cloud-upload-outline" role="img" class="md hydrated" aria-label="cloud upload outline"></ion-icon>
<i>이미지 업로 드</i>
</strong>
</span>
</label>
이거를 뺴보세요
답변감사합니다.
답변 주신 분들 조언 참조 해서
참조해서 진행 해봤습니다. ^^
잘 되네요
// 230104 : Reset img
resetInputBtn.addEventListener('click', function(event){
fileLabel.classList.remove("file-uploaded") // 첨부된 스타일 지우기
fileLabel.style.backgroundImage = ""; // 백그라운드 스타일 지우기
fileLabelText.innerHTML = filelabelDefault; // 이미지 첨부 전 디폴트
resetInputBtn.classList.add("disN") // 리셋버튼 숨김
fileInput.value = null; // 파일 리셋
});
이렇에 진행 하니 잘 되네요 ^^
감사합니다.
답변을 작성하시기 전에 로그인 해주세요.
