AttachFileVO
package kr.or.ddit;
public class AttachFileVO {
//첨부파일
private String fileName;//파일명
private String uploadPath;//경로
private String uuid;
private boolean image;
public String getFileName() {
return fileName;
}
public void setFileName(String fileName) {
this.fileName = fileName;
}
public String getUploadPath() {
return uploadPath;
}
public void setUploadPath(String uploadPath) {
this.uploadPath = uploadPath;
}
public String getUuid() {
return uuid;
}
public void setUuid(String uuid) {
this.uuid = uuid;
}
public boolean isImage() {
return image;
}
public void setImage(boolean image) {
this.image = image;
}
@Override
public String toString() {
return "AttachFileVO [fileName=" + fileName + ", uploadPath=" + uploadPath + ", uuid=" + uuid + ", image="
+ image + "]";
}
}
uploadAjax.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/resources/js/jquery-3.6.0.js"></script>
<title>Upload with Ajax</title>
<script type="text/javascript">
var sel_file = [];//다중선택을 위해 배열로 바뀜
$(function(){
//-----------이미지 미리보기 시작------------------
$("#input_img").on("change",handleImgFileSelect);
function handleImgFileSelect(e){
//e.target : 파일객체
//e.target.files : 파일객체 안의 파일들
var files = e.target.files;
var filesArr = Array.prototype.slice.call(files);
//파일들을 짤라서 어래이로 만들고
//f : 파일 객체
filesArr.forEach(function(f){//이를 포이치로 돌리기
//미리보기는 이미지만 가능함
if(!f.type.match("image.*")){
alert("이미지만 가능합니다.");
return;
}
//파일객체 복사
sel_file.push(f);
//파일을 읽어주는 객체 생성
var reader = new FileReader();
reader.onload = function(e){//e에 담아서
//forEach 반복 하면서 img 객체 생성
var img_html = "<img src=\""+e.target.result+"\"/>";
//e.target.result 이미지 결과물 경로를 넣어준다
$(".img_wrap").append(img_html);
}
reader.readAsDataURL(f);//읽어준다면
});
}
//-----------이미지 미리보기 끝------------------
//첨부파일의 확장자가 exe, sh, zip, alz 경우 업로드를 제한
var regex = new RegExp("(.*?)\.(exe|sh|zip|alz)$");
//최대 5MB까지만 업로드 가능
var maxSize = 5242880; //5MB
//확장자, 크기 체크
function checkExtension(fileName, fileSize){
if(fileSize >= maxSize){
alert("파일 사이즈 초과");
return false;
}
if(regex.test(fileName)){
alert("해당 종류의 파일은 업로드할 수 없습니다.");
return false;
}
//체크 통과
return true;
}
//Upload 버튼 클릭 시 수행
$("#uploadBtn").on("click",function(e){
//FormData : 가상의 <form> 태그
//Ajax를 이용하는 파일 업로드는 FormData를 이용
var formData = new FormData();
//<input type="file" 요소
var inputFile = $("input[name='uploadFile']");
//<input type="file" 요소 내의 이미지들
var files = inputFile[0].files;
console.log("files : "+ files);//f12 콘솔로 보여줌
for(var i=0;i<files.length;i++){
console.log(files[i]);//이미지를찍고
//function checkExtension(fileName, fileSize){
if(!checkExtension(files[i].name, files[i].size)){//파일의 이름과 파일의 크기
return false;
//!ture라면 실패.. 그러면 위로 올라가서 "해당 종류의 파일은 업로드할 수 없습니다." 출력
}
formData.append("uploadFile",files[i]);
//이미지 객체를 uploadFile이라는 이름으로 어팬드해주면 컨트롤러에 들어옴
}
//없어?카드가?또?(upcdt)
//processData,contentType은 반드시 false여야 전송됨
$.ajax({
url:'/uploadTest/uploadAjaxAction',
processData:false,
contentType:false,
data:formData,//여기에 담겨서 전송하는 것
type:'POST',
success:function(result){//success데이터가 들어오고
console.log("result : " + result);//이를 출력하는것
}
});
});
});
</script>
</head>
<body>
<!-- Ajax로 파일 업로드 해보기 -->
<h1>Upload with Ajax</h1>
<div class="uploadDiv">
<input type="file" id="input_img" name="uploadFile" multiple />
</div>
<button id="uploadBtn">Upload</button>
<div class="img_wrap">
<img src="" />
<img src="" />
<img src="" />
<img src="" />
<img src="" />
<img src="" />
<img src="" />
</div>
</body>
</html>
신입 개발자 입니다!!!