
Controller
// 커버 이미지 파일 저장
@RequestMapping(value = "/coverImageUpload.do", method = RequestMethod.POST)
@ResponseBody
public String coverImageUpload(@RequestParam("coverImage") MultipartFile file) throws Exception {
if (file.isEmpty()) {
return "fail";
}
try {
// 새 글 번호 가져오기
int newArticle = myhomeService.selectNewMyHomeNO();
System.out.println("이미지 폴더 명에 넣을 새글 번호 : " + newArticle);
String result = myhomeService.coverImageUpload(newArticle, file);
return result;
} catch (Exception e) {
return "fail";
}
}
Service
@Override
public String coverImageUpload(int newArticle, MultipartFile file) throws Exception {
try {
// 파일 저장 경로 설정
String uploadDir = "C:\\\\gami\\\\board\\\\board_myhome\\\\coverImage\\\\" + newArticle;
File directory = new File(uploadDir);
// 폴더가 존재하지 않으면 자동으로 생성
if (!directory.exists()) {
directory.mkdirs();
}
// 파일 이름 가져오기
String fileName = file.getOriginalFilename();
File saveFile = new File(directory, fileName);
file.transferTo(saveFile); // 파일 저장
// 파일 경로 DB 저장
String filePath = saveFile.getAbsolutePath();
myhomeDAO.CoverImagePath(newArticle, fileName);
return "success";
} catch (IOException e) {
e.printStackTrace();
return "fail";
}
DAO
@Override
public void CoverImagePath(int newArticle, String fileName) {
Map<String, Object> imageMap = new HashMap<>();
imageMap.put("articleNo", newArticle);
imageMap.put("imageFilename", fileName);
try {
// DB에 이미 존재하는 아티클 넘버인지 확인
int countArticleNo = sqlSession.selectOne("mapper.board.coverImageArticleNo", imageMap);
if(countArticleNo == 0) {
sqlSession.insert("mapper.board.coverImagePath", imageMap);
System.out.println("insert성공 " + fileName);
} else {
sqlSession.update("mapper.board.coverImageSamePath", imageMap);
System.out.println("update성공 " + fileName);
}
}catch (Exception e) {
e.printStackTrace();
}
}
mapper
<!-- 이미지 아티클넘버 조회용 -->
<select id="coverImageArticleNo" resultType="int" >
<![CDATA[
SELECT count(#{articleNo})
FROM image
WHERE articleNo = #{articleNo} and imagetype = '커버'
]]>
</select>
<!-- 커버이미지 경로 저장 -->
<insert id="coverImagePath" parameterType="map">
<![CDATA[
INSERT INTO image (imageNo, articleNo, imageFilename, imageUpdated, imageType)
VALUES (image_seq.NEXTVAL, #{articleNo}, #{imageFilename}, SYSDATE, '커버')
]]>
</insert>
<!-- 커버이미지 경로 업데이트(같은 아티클 넘버가 존재할 때) -->
<update id="coverImageSamePath" parameterType="map">
<![CDATA[
UPDATE image
SET imageFilename = #{imageFilename}
WHERE articleNo = #{articleNo} and imagetype = '커버'
]]>
</update>
myHomeForm.jsp
<script>
document.addEventListener("DOMContentLoaded", function () {
var dropZone = document.getElementById("dropZone");
var previewContainer = document.getElementById("previewContainer");
dropZone.addEventListener("dragover", function (event) { // 드래그 중일때 이벤트
event.preventDefault(); // 기본동작 방지
dropZone.classList.add("dragover");
});
dropZone.addEventListener("dragleave", function () { // dragzone 벗어났을 때 이벤트
dropZone.classList.remove("dragover");
});
dropZone.addEventListener("drop", function (event) { // drop이벤트
event.preventDefault();
dropZone.classList.remove("dragover");
var files = event.dataTransfer.files;
handleFile(files[0]); // 파일 하나만 업로드 가능하도록 제한
// 파일을 FormData에 추가하여 서버로 전송
var formData = new FormData();
formData.append("coverImage", files[0]); // 드래그 앤 드롭된 파일
$.ajax({
type: "POST",
enctype: 'multipart/form-data',
processData: false,
contentType: false,
url: "/gami/board/board_myhome/coverImageUpload.do", // 파일 업로드를 처리할 URL
data: formData,
success: function(response) {
console.log(response);
if (response === "success") {
alert("파일이 성공적으로 업로드되었습니다.");
} else {
alert("파일 업로드 중 오류가 발생했습니다.");
}
}
});
});
function handleFile(file) {
if (!file.type.startsWith("image/")) { // 파일의 MIME타입이 image인지 확인
alert("이미지 파일만 업로드 가능합니다!");
return;
}
previewContainer.innerHTML = ""; // 기존 미리보기 삭제
var reader = new FileReader(); //FileReader:파일 읽는 API
reader.onload = function (e) {
var img = document.createElement("img");
img.src = e.target.result; // 읽어온 파일의 url
previewContainer.appendChild(img); // 미리보기에 이미지 삽입
};
reader.readAsDataURL(file);
}
});
</script>