[JavaScript] 이미지 미리보기 만들기 (POST) -2

mason.98·2021년 11월 17일

javascript 미리보기 javascript 이미지 미리보기 이미지 미리보기

Flask

목록 보기

4/10

input태그 이쁘게 꾸미기
이미지 업로드 시, fakepath 없애고 이미지 이름만 출력
이미지 이름 출력되는 input 태그 입력 못하게 하기
🔺 이미지 업로드 시, 숨겨져 있던 div영역 출력되면서 미리보기 같이 출력
🔺 숨겨져 있던 div 영역에 POST방식으로 submit하는 form태그 만들기

📌결과

📝html

  <div class="container">
    <div class="ocr_upload">
      <p class="ocr_upload-text">
        OCR 이미지
        <span class="ocr_upload-warning">
        ※ *.png / *.jpg (이미지파일)로 업로드해주세요 ※
        </span>
      </p>
      <form class="ocr_form" action="#" method="POST" 
            enctype="multipart/form-data">
        <input type="text" class="upload-name" 
         value="이미지를 업로드 하세요" placeholder="이미지를 업로드 하세요" disabled>
        <label for="upload-file">파일선택</label>
        <input name="file" type="file" id="upload-file">
      </form>
    </div>
    
    <div class="ocr_thumbnail visible">
      <img src="" class="thumbNail">
        <label for="file">변환하기</label>
        <input form="ocr_form" type="submit">
    </div>
  </div>

기존 html에서 ocr_upload(업로드)와 ocr_thumbnail(미리보기) 부분으로 나누었다.

ocr_thumbnail(미리보기) 영역
1. 업로드된 image를 출력할 .thumbNail image 태그
2. POST 형식으로 값을 전달할 form태그와 태그들

📝css

1. 업로드 텍스트 스타일 변경

.ocr_upload .ocr_upload-text {
      font-weight: bold;
      letter-spacing: -1px;
    }
    .ocr_upload .ocr_upload-warning {
      font-size: small;
      font-weight: normal;
      color: #b2b2b2;
    }

2. 미리보기 부분 스타일 변경

.ocr_thumbnail {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: 50px 50px;
      padding: 15px;
      width: auto;
      height: 350px;
    }
    .ocr_thumbnail label {
      padding: 10px 20px;
      background-color: rgba(0, 53, 109, 0.95);
      border-radius: 5px;
      color: white;
      cursor: pointer;
    }
    .thumbNail {
      width: auto;
      height: 250px;
      border: 1px solid black;
      background-color:cadetblue;
      margin-bottom: 25px;
    }
    .visible {
      visibility: hidden;
      /* display: none 이랑 뭐가 다른지 */
    }

2. input submit 숨기기

    /* 기존 input submit 디자인 없애기*/
    .container input[type="submit"] {
      position: absolute;
      width: 0;
      height: 0;
      padding: 0;
      overflow: hidden;
      border: 0;
    }

📝javascript

window.addEventListener('load', function() {
  const frame = document.querySelector(".ocr_thumbnail");
  const thumbNail = document.querySelector(".thumbNail");
  const upload_file = document.querySelector("#upload-file");
  const upload_name = document.querySelector(".upload-name");

  upload_file.addEventListener('input', ()=> {
    if(isImage(upload_file.files[0])){
      changeVal(upload_name, (upload_file.files[0].name));
      const reader = new FileReader();
      reader.addEventListener('load', ()=> {
        thumbNail.src = reader.result; 
        if(frame.classList.length>1){
        frame.classList.remove('visible');
        }
      });
    // fileURL 읽어와서 저장
    reader.readAsDataURL(upload_file.files[0]);
    } 
    else {
      alert('이미지만 업로드 가능합니다.');
      return;
    }
  });
  function isImage(file){
    return file.type.indexOf('image') >= 0;
  }
  function changeVal(class_name, change_name){
    class_name.value = change_name;
  }
});

FileReader인 reader변수 생성 후, 업로드된 file의 src를 .thumbNail src에 넣는다.
만약 frame의 class개수가 1개초과라면 (visible 적용 상태) visible 스타일을 삭제한다.
이후에 readAsDataURL 함수를 통해 fileURL을 읽어오고 저장한다.

만약 업로드된 file이 이미지가 아니라면 alert를 출력한다.