ionic 이미지 미리보기 css input 감춤처리

파일 선택시 업로드 전에 이미지를 미리보는 기능

 

 

HTML

 

<label class="myFakeUploadButton" for="myFileInput">Upload</label> <input type="file" id="myFileInput"> 

 

SCSS

#myFileInput{ position: absolute; opacity: 0; } .myFakeUploadButton{ /* Whatever you want */ } 

HTML

<input type="file" accept="image/*" capture="camera" (change)="onFileSelected($event)" id="fileInput"/> 
<label for="fileInput" icon-only ion-button> 
  <ion-icon name="camera"></ion-icon> 
</label> 

​위와 같은 방식으로 적용을 하면 된다.

 

---

실제 적용 소스 예제는 아래와 같다.

 

HTML

      <input type="file" (change)="selectedFile($event)" id="myFileInput">

 

SCSS

#myFileInput{ position: absolute; opacity: 0; } .myFakeUploadButton{ /* Whatever you want */ } 

 

 

TS

//이미지 선택시 실행
  selectedFile(event){

    this.photo=event.target.files[0];

    console.log(this.photo);

    this.projectImage(event.target.files[0]);

  }

  

  //이미지 선택 미리보기

  projectImage(file: File) {

      let reader = new FileReader;

      // TODO: Define type of 'e'

      reader.onload = (e: any) => {

          // Simply set e.target.result as our <img> src in the layout

          this.profile.photo = e.target.result;

      };

      // This will process our file and get it's attributes/data

      reader.readAsDataURL(file);

      this.nick_pass=1; //0=>1 stop => go

      this.change_btn();

  }

​