파일컨트롤을 이용하여 이미지를 화면에 로딩하기

 

파일컨트롤에서 선택한 이미지를 화면에 로딩하려면 WebAPI 의 FileReader 객체를 이용합니다.

​

[필요한 것]

​

1. FileReader 객체

​

[구현]

​

1. file upload 컨트롤을 작성합니다.

<input type="file" name="attach_file" id=attach_file1" />
<img src="https://via.placeholder.com/150" id="attach_img1" />

2. file upload 컨트롤에 binding하는 eventhandler 를 작성합니다.

document.getElementById("attach_file1").onchange = function(e) {};

 

3. upload 한 file 인스턴스를 처리하는 로직을 작성합니다.

document.getElementById("attach_file1").onchange = function(e) 
{
  var filereader = new FileReader();
  filereader.readAsDataURL(e.target.files[0]);
  filereader.onload = function(e) {};
};

4. file 인스턴스로 부터 받은 data stream을 이미지로 표시하는 로직을 작성합니다.

document.getElementById("attach_file1").onchange = function(e) 
{
  var filereader = new FileReader();
  filereader.readAsDataURL(e.target.files[0]);
  filereader.onload = function(e) 
  {
    document.getElementById("attach_img1").src = e.target.result;    
  };
};