filereader event

UPLOAD를 누르면 .uploadName에 이미지 이름이, .img1에 이미지가 들어가게 해보자.

 

 

HTML

                  <div class="inputControll">
                    <input class="uploadName" value="Main image">
                    
                    <label for="mainImage">UPLOAD</label>
                    <input type="file" id="mainImage" class="uploadHidden" name="main">
                  </div>
                  
                  <div class="img1_box imgWrap">
                    <img id="img1">
                  </div>

"UPLOAD" label과 그 label에 연결된 input(#mainImage)이 있음.

 

---

JS

$(function(){
  const fileTarget = $(".uploadHidden");
  $("#mainImage").on("change", img1FileSelect);

  fileTarget.on('change', function(){
    if(window.FileReader){
      let filename = $(this)[0].files[0].name;
      $(this).siblings('.uploadName').val(filename);
      console.log(filename);
    }

  }); 
});


  // filereader
  let img1FileSelect = function(event){
    let input = event.target;
    let reader = new FileReader();
    
    reader.onload = function(){
      let dataURL = reader.result;
      let output = document.querySelector("#img1");
      output.src=dataURL;
    };
    
    reader.readAsDataURL(input.files[0]);
  }

 

 

  const fileTarget = $(".uploadHidden");

.uploadHidden 을 가져온다.

#mainImage를 img1FileSelect 로 바꾼다.

 

  fileTarget.on('change', function(){
    if(window.FileReader){
      let filename = $(this)[0].files[0].name;
      console.log(filename);`
      $(this).siblings('.uploadName').val(filename);
    }

  }); 

 

전역객체에서 파일을 리드하면, (FileReader),

그 파일의 이름 $(this)[0].files[0].name; 을 filename 변수에 저장하고,

(console.log(filename); 을 찍어보면 파일명이 나온다.)

 

이것의 형제인 uploadName의 value를 filename으로 바꿔주는 것.

(uploadName의 value는 html에서 "Main image"로 정해주었었음)

 

 

 let img1FileSelect = function(e){
    let reader = new FileReader();
    reader.readAsDataURL(e.target.files[0]);
    
    reader.onload = function(){
      let dataURL = reader.result;
      // console.log(dataURL);

      let output = document.querySelector("#img1");
      // #img1 DOM으로 가져옴

      output.src=dataURL;
      // #img1.src = dataURL
    };
    

filereader 이벤트

jsfiddle.net/eu81273/2daxdhvz/

www.zerocho.com/category/HTML&DOM/post/592827558653d6001804a0a5

(HTML&DOM) File API - 이미지 미리보기

FileReader 예제 (이미지) - JSFiddle - Code Playground

을 참고하여 작성된 코드