파일업로드시 미리보기 제거하는 부분 문의드립니다. 채택완료

#사진1

988402489_1672823139.9112.png

#사진2

988402489_1672823767.6627.png

 

위 #사진1 처럼 부트 5.0 가져다 사용하고 있는되요.

#사진2처럼 닫기버튼을 누르면,

초기화 하는 부분은 없더라구요.

혹시 리셋 이미지 조언 구합니다.

 

스크립트는 아래와 같습니다.

Copy
// 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입니다.

Copy
<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개

채택된 답변
+20 포인트

올리신 소스 기준으로는

Copy
fileLabelText.innerHTML = filelabelDefault;

이부분 참조해서 구성하면 될것 같습니다.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

답변감사합니다.

댓글을 작성하려면 로그인이 필요합니다.

답변 주신 분들 조언 참조 해서 

참조해서 진행 해봤습니다. ^^
잘 되네요


    // 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;     // 파일 리셋

    });
이렇에 진행 하니 잘 되네요 ^^

 

감사합니다.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

 <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>

 

 

이거를 뺴보세요

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

답변감사합니다.

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고