<input type="file" id="file" name="myfile" accept="image/*">

name을 추가한후 upload 라이브러리를 통해 받으면 될것 같습니다.

추가 텍스트는 <input type="text" ... > 추가하면 되지 않을까요?

한대승님 답변감사합니다.

네, 현재

<form>

<input type = "file" name="fileName" />
<input type = "text" name="textNam" />

<input type="submit" value="저장" />

</form>

대락 이러한 형태의 폼입니다. 그러나 제가 본문에 사용한 라이브러리를 사용하면 버튼을 클릭한 시점에서 이미지 리사이징을 하고 ajax로 서버에 데이터를 전송하는데, 전송이 되었다고 통신 이후에 확인은 되는데, upload라이브러리로 어떻게 받아야 할지 모르겠습니다. 기존에 첨부한 파일에서 리사이징된 파일은 form에 있는 file 타임의 데이터가 아니거든요. 그래서 현재 form 안에 히든 타입의 input을 하나 생성하여 파일의 base64로 인코딩하여 서버에 전달합니다.

그런데 base64로 변환하면 서버 트래픽 부담이 증가될 수 있다고 하는데, 기존 일반적인 파일 전송대비 어느 정도인지 알고 계시거나 참고할 만한 자료가 있을까요?

@주말생각 상황에 따라 다르지만 원본(바이너리)에 비해 대략 33~36%의 오버헤드가 발생합니다.

https://ko.wikitrev.com/wiki/base64