AJax로 list 띄우기

문이빈·2023년 9월 26일

Cloud기반 웹 DevOps 프로젝트 개발자 과정

목록 보기

70/87

선택으로 여러개의 이미지 보기

<!-- 한번에 여러개의 파일 선택 -->
<tr>
	<td colspan="2">
			
	<!-- 업로드 버튼을 누르기 전에 선택한 이미지가 맞는지 확인하기 위해서 이미지를 보여준다.(1개) -->
	<!-- <img id="showImg" width="70" height="70"> -->
			
	<!-- 여러 개의 이미지 미리보기 -->
	<span id="showImgList"></span>
		<img id="camera" alt="카메라" src="../image/camera.png" width="50" height="50">
		<input type="file" name="img[]" id="img" multiple="multiple" style="visibility: hidden;">
	</td>
</tr> 


<script type="text/javascript">
$('#camera').click(function() {
	// 강제 이벤트 발생 - trigger
	$('#img').trigger('click'); 
});
$('#img').change(function() {
	
	$('#showImgList').empty();
	for(i=0; i<this.files.length; i++){
		readURL(this.files[i]);
	}
});

function readURL(file){
	var reader = new FileReader();
	
	var show;
	reader.onload = function(e){
		var img = document.createElement('img');
		img.src = e.target.result;
		img.width = 70;
		img.height = 70;
		$('#showImgList').append(img);
	}
	reader.readAsDataURL(file);
}
</script>

list를 AJax로 표현하기

------------------UserControllerUploadAJax------------------

@GetMapping(value = "upload_list_AJax")
		public String upload_list_AJax() {
			// 동적처리 - 지금은 DB로 가서 데이터를 가져오지 않는다.
			return "/user/upload_list_AJax";
		}
        
------------------upload_list_AJax.jsp------------------

<table border="1" id="imageListTable" frame="hsides" rules="rows">
	<tr>
		<th width="200">번호</th>
		<th width="200">이미지</th>
		<th width="200">상품명</th>
	</tr>
	
	<!-- 동적 처리 -->
	
</table>

<script src="http://code.jquery.com/jquery-3.7.0.min.js"></script>
<script type="text/javascript" src="../js/upload_list_AJax.js"></script>

------------------upload_list_AJax.js------------------

$(function(){
	/*DB에 가서 데이터 가져오기 $.ajax({});*/
	$.ajax({
		type: 'post',
		url: '/chapter06_Web/user/getUpload_list_AJax',
		dataType: 'json',
		success: function(data){
			console.log(JSON.stringify(data));
		},
		error: function(e){
			console.log(e);
		}
	});
});

------------------UserControllerUploadAJax------------------

@PostMapping(value = "getUpload_list_AJax")
		@ResponseBody
		public List<UserImageDTO> getUpload_list_AJax(){
			return userServiceUpload.getUpload_list_AJax();
		}
        
------------------UserServiceUpload------------------

public List<UserImageDTO> getUpload_list_AJax();

------------------UserServiceUploadImpl------------------

@Override
	public List<UserImageDTO> getUpload_list_AJax() {
		return userDAOUpload.getUpload_list_AJax();
	}

------------------UserDAOUpload------------------

public List<UserImageDTO> getUpload_list_AJax();

------------------UserDAOUploadMyBatis------------------

@Override
	public List<UserImageDTO> getUpload_list_AJax() {
		
		return sqlSession.selectList("userUploadSQL.getUpload_list_AJax");
	}

------------------userUploadMapper.xml------------------

<select id="getUpload_list_AJax" resultType="user.bean.UserImageDTO">
		select * from userimage order by seq desc
	</select>

------------------upload_list_AJax.js------------------

$(function(){
	/*DB에 가서 데이터 가져오기 $.ajax({});*/
	$.ajax({
		type: 'post',
		url: '/chapter06_Web/user/getUpload_list_AJax',
		dataType: 'json',
		success: function(data){
			console.log(JSON.stringify(data));
			console.log(data[0].seq);
			
			$.each(data, function(index, item){
				$('<tr/>').append($('<td/>',{
					align: 'center',
					text: item.seq
					
				})).append($('<td/>',{
					align: 'center',
					
				}).append($('<img/>', {
					src: '../storage/' + item.image1,
					style: 'width:70px; height: 70px;'
				}))
				
				).append($('<td/>',{
					align: 'center',
					text: item.imageName
				})).appendTo($('#imageListTable'));
			});
		},
		error: function(e){
			console.log(e);
		}
	});
});

백틱으로 한번 바꿔서

var result;
	$.each(data, function(index, item){
		result = `<tr>` +
				 	`<td align="center">` + item.seq +`</td>` +
					`<td align="center">` + 
				 		`<img src="../storage/` + item.image1 + `" style="width:70px; height: 70px;">` +
				 	`</td>` +
				 	`<td align="center">` + item.imageName + `</td>` +
				 `</tr>` +
						 
				 
		$('#imageListTable').append(result);
	});