이미지url을 업로드하자! URL형식 이미지 → HTML 업로드 처리

웹 애플리케이션환경에서 서버에 존재하는 url로 접근 가능한 이미지를 클라이언트의 <input type="file"> 요소에 자동으로 설정(업로드된 것처럼 보이게) 하고 싶을 때가 있습니다.
사용자에게 파일 선택을 요구하지 않고도 서버 이미지를 기반으로 파일 업로드를 처리할 수 있는 방법을 작성하겠습니다.

전체 흐름 요약

1. Java 서버에서 이미지 파일을 바이트 배열로 읽음
2. Base64로 인코딩된 문자열로 변환
3. 클라이언트(HTML/JS)로 전송
4. Base64 문자열을 File 객체로 변환
5. 변환된 파일을 <input type="file"> 요소에 삽입

Java 서버 코드: 이미지 파일 → Base64 문자열

import org.apache.commons.io.FileUtils;
import org.apache.commons.codec.binary.Base64;

// 이미지 파일을 바이트 배열로 읽기
byte[] bytes = FileUtils.readFileToByteArray(new File("이미지파일 경로"));

// 바이트 배열을 Base64 문자열로 인코딩
String encodingImgFile = Base64.encodeBase64String(bytes);

js에서 Base64 문자열을 File 객체로 변환

dataURLtoFile : function ( dataurl, filename ) {
   var arr = dataurl.split(','),
      mime = arr[0].match(/:(.*?);/)[1],
      bstr = atob(arr[1]),
      n = bstr.length,
      u8arr = new Uint8Array(n);

   while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
   }

   return new File([u8arr], filename, {type: mime});
}

변환된 File 객체를 input[type=“file”] 요소에 삽입

let file = WebUtil.dataURLtoFile(encodedData, fileName);
let container = new DataTransfer();
container.items.add(file);
$body.find("input[name=multipartFiles]")[0].files = container.files;
$body.find("input[name=multipartFiles]").eq(0).trigger('change');

끄읏.