56일차_이미지 파일 업로드

1. image 파일 업로드

반드시 post 방식

enctype="multipart/form-data" 지정

<input type="file">

storage 폴더 작성

가상 폴더

>> D:\Web\workspace\projectMVC\src\main\webapp\storage

실제 폴더

>> D:\Web\workspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps

\projectMVC\src\main\webapp\storage

 

1) 동작

1. 카메라 이미지 클릭
2. 이미지 파일 업로드
3. 업로드한 이미지 화면에 띄우기

 

$('#camera').click(function() { // 카메라 이미지를 통해 파일 업로드 기능 실행 
	// 강제 이벤트 발생
	$('#image1').trigger('click');
});

function readImage(input) { // 업로드된 파일 화면에 띄우기 
	console.log(input.files[0]);
	var reader = new FileReader();

	reader.onload = function(e) {
		$('#showImg').attr('src', e.target.result);
	}
	
	reader.readAsDataURL(input.files[0]);
}

$('#image1').change(function() { // 카메라 이미지 태그에 변화가 생기면 readImage 함수 호출
	readImage(this);
})

 

FileReader 란?

type이 file인 input 태그 또는 API 요청과 같은 인터페이스를 통해 File 또는 Blob 객체를 편리하게 처리할수있는 방법을 제공하는 객체

 

abort, load, error와 같은 이벤트에서 발생한 프로세스 처리

File 또는 Blob 객체를 읽어서 result 속성에 저장

FileReader는 비동기 동작

FileReader.onload() load 이벤트의 핸들러

: 읽기 동작이 성공적으로 완료되었을 때마다 발생 

 

 

2) Java

package imageboard.service;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.control.CommandProcess;
import com.oreilly.servlet.MultipartRequest;
import com.oreilly.servlet.multipart.DefaultFileRenamePolicy;

import imageboard.bean.ImageboardDTO;
import imageboard.dao.ImageboardDAO;

public class ImageBoardWriteAjaxService implements CommandProcess {

	@Override
	public String requestPro(HttpServletRequest request, HttpServletResponse response) throws Throwable {
		String realFolder = request.getServletContext().getRealPath("/storage");
		// 이미지 저장 폴더
		System.out.println("realFolder: " + realFolder);
		
		// upload
		MultipartRequest multi = new MultipartRequest(
															request, 
															realFolder,
															5 * 1024 * 1024,
															"UTF-8",
															new DefaultFileRenamePolicy() 
															// 동일한 파일명이 업로드 되면 파일명 변경하여 업로드
														);
		
		// data
		String imageId = multi.getParameter("imageId");
		String imageName = multi.getParameter("imageName");
		int imagePrice  = Integer.parseInt(multi.getParameter("imagePrice"));
		int imageQty = Integer.parseInt(multi.getParameter("imageQty"));
		String imageContent = multi.getParameter("imageContent");
		String image1 = multi.getOriginalFileName("image1"); // 업로드 한 파일명
		String fileName = multi.getFilesystemName("image1"); // 변경된 파일명
		
		System.out.println(image1 + ", " + fileName);
		
		
		ImageboardDTO imageboardDTO = new ImageboardDTO(
															0,
															imageId,
															imageName,
															imagePrice,
															imageQty,
															imageContent,
															image1,
															null
														);

		System.out.println(
							imageboardDTO.getSeq() + "\t" +
							imageboardDTO.getImageId() + "\t" + 
							imageboardDTO.getImageName() + "\t" +
							imageboardDTO.getImagePrice() + "\t" +
							imageboardDTO.getImageQty() + "\t" + 
							imageboardDTO.getImage1()
						);
		ImageboardDAO.getInstance().imageboardWrite(imageboardDTO);
		return "none";
	}

}

 

 

2. 이미지 목록 리스트

게시물 목록 리스트 코드와 동일함..!! 

jsp 파일 코드가 좀 바뀜

<c:if test="${boardList.size() != 0}">
    <c:forEach var="imageboardDTO" items="${imgageboardList }">
        <tr>
            <td class="no">${imageboardDTO.getSeq() }</td>
            <!-- src="가상폴더의 위치" -->
            <td class="image"><img height="150px" alt="" src="/projectMVC/storage/${imageboardDTO.getImage1() }"> </td>
            <td class="imageName"><a class="subjectA" href="#">${imageboardDTO.getImageName() }</a></td>
            <td class="imagePrice"><fmt:formatNumber pattern="#,###" type="number"  value="${imageboardDTO.getImagePrice() }" /></td>
            <td class="imageQty"><fmt:formatNumber pattern="#,###" type="number"  value="${imageboardDTO.getImageQty() }" /></td>
            <td class="sum"><fmt:formatNumber pattern="#,###" type="number"  value="${imageboardDTO.getImagePrice() * imageboardDTO.getImageQty() }" /></td>
        </tr>
    </c:forEach>
</c:if>