본문 바로가기
java

스프링 파일업로드

by rewind 2024. 2. 1. 
<!-- *** 파일명! *** quick/create.jsp -->
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="sec"
	uri="http://www.springframework.org/security/tags"%>
<div class="card card-primary">
	<p>${quickVO}</p>
	<div class="card-header">
		<h3 class="card-title">Quick Example</h3>
	</div>
	<!-- 
요청 URI : /quick/createPost
요청파라미터 : {emailAdres=test@test.com,password=java,uploadFile=파일객체}
요청방식 : post
 -->
	<form action="/quick/createPost?${_csrf.parameterName}=${_csrf.token}"
		method="post" enctype="multipart/form-data">
		<div class="card-body">
			<div class="form-group">
				<label for="exampleInputEmail1">Email address</label> <input
					type="email" class="form-control" name="emailAdres" id="emailAdres"
					readonly="readonly" value="${quickVO.emailAdres}" placeholder="이메일"
					required="required" />
			</div>
			<div class="form-group">
				<label for="exampleInputPassword1">Password</label> <input
					type="password" class="form-control" name="password" id="password"
					readonly="readonly" value="${quickVO.password}" placeholder="비밀번호"
					required="required" />
			</div>
			<div class="form-group">
				<label for="exampleInputFile">File input</label>
				<div class="input-group">
					<div class="custom-file">
						<input type="file" class="custom-file-input" id="uploadFile"
							multiple="multiple" name="uploadFile"> <label
							class="custom-file-label" for="uploadFile">Choose file</label>
					</div>
				</div>
			</div>
		</div>

	<div>
            <div class="filter-container p-0 row" style="padding: 3px; position: relative; width: 100%; display: flex; flex-wrap: wrap; height: 177px;">
               <div class="filtr-item col-sm-2" data-category="1" data-sort="white sample" style="opacity: 1; transform: scale(1) translate3d(0px, 0px, 0px); backface-visibility: hidden;
               perspective: 1000px; transform-style: preserve-3d; position: absolute; width: 91.4px; transition: all 0.5s ease-out 0ms, width 1ms ease 0s;">
                  <a href="https://via.placeholder.com/1200/FFFFFF.png?text=1" data-toggle="lightbox" data-title="sample 1 - white">
                     <img src="/resources/images/" class="img-fluid mb-2" alt="white sample">
                  </a>
               </div>
            </div>
         </div>

		<div class="card-footer">
			<button type="submit" class="btn btn-primary">Submit</button>
		</div>
		<sec:csrfInput />
	</form>
</div>

 

detail.jsp

 

이미지 불러오기 확인

 

모달창으로 이미지 확대 띄우기

 

detail.jsp 마지막부분에 아래 코드 추가

<div class="modal fade" id="modal-lg">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">Large Modal</h4>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <p>One fine body&hellip;</p>
            </div>
            <div class="modal-footer justify-content-between">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
      </div>
      <!-- /.modal -->

 

detail.jsp 44번째 코드 수정

  <a href="#modalPicture" data-toggle="modal">

 

스크립트 추가

<script type="text/javascript" src="/resources/js/jquery.min"></script>
<script type="text/javascript">
$(function () {
	$(".clsPicture").on("click" , function () {
		
	});
	
});

 

모달창 수정

<!-- ///// 이미지 크게 보기 모달 시작 /////-->
<div class="modal fade" id="modalPicture">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modalPicTitle">Large Modal</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modalPicBody">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer justify-content-between">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
<!-- ///// 이미지 크게 보기 모달 끝 /////-->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

 

ajax로 파일업로드하기

 

button에 아이디 부여 => id= btnAjaxSubmit

 

하나의 jsp 페이에서 id값은 유일해야 한다.

 

	
	// ajax 파일업로드 시작 //////////////////////////////
	// Ajax(Asynchronous비동기 JavaScript and XML)
	// 응답이 없어도 작업을 수행한다.
	$("#btnAjaxSubmit").on("click" , function () {
		let itemName = $("#itemName").val();
		let price = $("#price").val();
		let description = $("#description").val();
		let inputImgs = $("inputImgs"); //파일객체
		// 이미지 파일들을 꺼내오자
		let files = inputImgs[0].files;
		
		//가상의 폼을 생성 <form></form>
		let formData = new FormData();
		formData.append("itemName" , itemName);
		formData.append("price" , price);
		formData.append("description" , description);
		formData.append("inputImgs" , inputImgs);
		
		// 가상폼인 formData에 각각의 이미지를 넣자
		for(let i = 0 ; i < files.length ; i++){
			formData.append("uploadfile" , files[i])
		}
		/*
		<form>
			<input type="text" name="itemName" value="삼성폰">
			<input type="text" name="price" value="12000">
			<input type="text" name="description" value="괜찮다">
			<input type="file" name="uploadfile"...
			<input type="file" name="uploadfile"...
			//file의 name이 같다 => 배열로 받는다
		</form>		
		*/
		//ajax
		$.ajax({
			url : "/item/registerAjaxPost3",
			processData : false,
			contentType : false,
			data : formData,
			dataType : "json",
			type : "post",
			beforeSend:function(xhr){
				xhr.setRequestHeader("${_csrf.headerName}","${_csrf.token}");
			},	// beforeSend => 스프링 시큐리티에서 사용시 반드시 작성
			success : function (result) {
				console.log("result : " , result);
			}
		})
		
	});
	// ajax 파일업로드 끝 ///////////////////////////////

관련글

티스토리툴바