<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

...

}

)

처럼 해주면 된다.