로컬 이미지 파일을 리사이즈 해서 업로드 하는 방법에 대한 설명

로컬 이미지 파일을 리사이즈 해서 업로드 하는 방법에 대한 설명


<input type="file"> 에서 파일을 선택하면 해당 노드에서  .files 라는 FileList 가 생긴다.
로컬 이미지 리사이즈 한 후 내용을  FileList 안에있는 File 의 내용과 바꿔치기 해야한다.
문제는 이 FileList는 수정을 할 수가 없다!! (브라우저 보안 이슈!)
읽어오는건 문제 없음.

즉, <input type="file">을 사용해서는 이미지 리사이즈 후 업로드 불가.

해결 방법

<input type="file"> 의 내용을 바꾸지 않고 파뀐 내용을 전송 하도록 하면 되다.
즉, <form>으로 페이지 이동하면서 전송하는 건 포기
대신 AJAX의 파일 업로드를 사용하면 된다.
필요 한건
FormData

var fd = new FormData()
fd.append("upload[]",file1);
fd.append("upload[]",file2);
처럼 되고 File1 은 <input>의 files[0] 처럼 로컬에서 선택된 파일(File)이나
var file2 = new File([ Blob ],name,{type:'image/png'}); 같이 임의로 만든 File 을 사용 할 수 있다.
즉, 원하는 걸 File로 넣을 수 있음.
즉, image를 canvas에서 resize 한 뒤 canvas.toBlob 해서 Blob을 만들고 그걸 다시 File 로 만들어서 사용하면 된다.

ajax 로 사용시
$.ajax(
{
...
"data" : fd
...
}
)
처럼 해주면 된다.
댓글
  • No Nickname
    No Comment
  • 권한이 없습니다.
    {{m_row.m_nick}}
    -