크롬 기본기능은 브라우저에 파일 및 이미지를 끌어다 놨을경우 해당 이미지를 새탭으로 보여줌
특정 div에 파일을 끌어다놓으면 파일 업로드를 위한 드래그가 되게끔 하려면
먼저 브라우저가 파일을 자동으로 열어주는 기능을 막아야함
$('.file-drop').on('dragenter dragover', function(event){
event.preventDefault();
});
$('.file-drop').on('drop', function(event){
event.preventDefault();
var formData=new FormData();
var files=event.originalEvent.dataTransfer.files; //드래그한 file 정보
var i=0;
for(i=0;i<files.length; i++){
console.log(files[i]);
//서버로 보낼 form-data 작성
formData.append("files", files[i]);
}
$.ajax({
type:'post',
url:'/ex05/upload-ajax',
data:formData,
processData:false,
contentType:false,
success:function(data){
console.log(data);
}
});
});
@PostMapping("/upload-ajax")
@ResponseBody
public ResponseEntity<String> uploadAjaxPOST(MultipartFile[] files) throws IOException {
logger.info("uploadAjaxPOST() 호출");
//임의의 파일 하나만 저장
String result=null; //파일 경로 및 썸네일 이미지 이름
result=FileUploadUtil.saveUploadedFile(
uploadPath, files[0].getOriginalFilename(), files[0].getBytes());
return new ResponseEntity<String>(result, HttpStatus.OK);
}
임의로 하나만 저장해봄. 그러면 오늘날짜 폴더에 원본과 썸네일용이미지가 생성된다
브라우저에서 서버로 이미지를 보내 저장하고 저장한 이미지를 서버에서 다시 꺼내는 건 시점문제때문에 불가능하다!
그래서 이미지의 경로만 서버에 저장한다. db에는 이미지 데이터를 가져오는게 아니라 데이터의 경로가 저장되어 있는 것.
이미지의 이름만 DB에 넣고 꺼낼땐 이미지의 경로와함께 사용하기
데이터 insert 시
jsp에서 이미지파일을 넣으면 controller에서 이미지의 이름을 db에 넣고 만들어진 폴더에 이미지 데이터를 저장.
데이터 select 시
DB에서 데이터를 가져오면 이미지의 이름만 나옴. 이미지 이름으로 다시 서버에서 폴더에 저장된 이미지 데이터를 가져오기
@GetMapping("/display")
public ResponseEntity<byte[]> display(String fileName) throws Exception{
logger.info("display() 호출");
ResponseEntity<byte[]> entity=null;
InputStream in=null;
String filePath=uploadPath+fileName;
in=new FileInputStream(filePath); //파일넣기
//파일 확장자
String extension=filePath.substring(filePath.lastIndexOf(".")+1);
logger.info(extension);
//응답헤더
HttpHeaders httpHeaders=new HttpHeaders();
httpHeaders.setContentType(MediaUtil.getMediaType(extension));
//데이터 전송
entity=new ResponseEntity<byte[]>(
IOUtils.toByteArray(in), //파일에서 읽은 데이터
httpHeaders, //응답헤더
HttpStatus.OK);
return entity;
}
파일이름을 전송해서 함수를 호출하면 서버에서 이미지를 확인할 수 있음
org.springframework.http
. 응답헤더에 Content-Type 설정위에서 다 했다. display를 통해 서버에 저장된 이미지를 다시 웹브라우저로 전송받았기때문에(그 결과가 ajax이 success) img태그로 전송받은 이미지데이터를 출력해주면 된다
$.ajax({
type:'post',
url:'/ex05/upload-ajax',
data:formData,
processData:false,
contentType:false,
success:function(data){
console.log(data); //서버에 업로드된 파일이름을 가지고옴
$('.upload-list').html("<img src=/ex05/display?fileName="+data+">");
}//success
}); //end ajax
false
로 해야함application/x-www-form-urlencoded; charset=UTF-8
인데 파일은 multipart/form-data
형태로 보내야 해서 false
로 설정설계가 중요
ajax를 사용하는 경로는 rest api를 따로 만들어서 사용
전자정부프레임워크=MVC구조=스프링!