File Upload Tag 정리

FileUpload Tag를 개인적으로 정리하고 싶으니 정리를 하도록 하자

 

 

기본 FileUpload 태그

 

// 멀티 업로드를 위해서는 multiple  을 입력해 준다.

<input type='file' multiple

            onChange={onChangeHandler}></input>





const onChangeHandler = (event) => {

   if (event.target && event.target.files) {

       // event.target.files 배열에 file binary 내용이 들어 있다.

   }



  // temp file로 만들고 URL을 구하기 위해 binary를 복사

  let reader = new FileReader();

  reader.onload = function (event) {

    let tempImageUrl = event.target.result;



  }



  reader.readAsDataURL(event.target.files[0]);

}

 

기본 업로드 디자인이 아니라 .  . . . 디자인된 이미지 버튼을 통해서 file upload를 클릭하고 싶을 때 . . . . (React에서의 경우 . . . )

 

<button onClick={(event) => {

  inputElement.click();

}}>

  <span className="material-icons">image</span>

  사진 첨부

<button>

<input

  style={{

    display: "none"

  }}

  type="file"

  ref={(input) => (inputElement = inpiut)}

  onChange={onChangeHandler}></input>

 

또 까먹겠지... 그럴때 또보자 . .

 

그러하다.