<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Insert title here</title>
</head>
<body>
<h1>Upload with Ajax</h1>
<div class="uploadDiv">
<input type="file" name="uploadFile" multiple>
</div>
<div class="uploadResult">
<ul></ul>
</div>
<button id="uploadBtn">Upload</button>
<script type="text/javascript">
var regex = new RegExp("(.*?)\.(exe|sh|zip|alz)$"); //정규식
var maxSize = 5242880; //5MB
var cloneObj = $(".uploadDiv").clone();
function checkExtension(fileName,fileSize){
if(fileSize >= maxSize){
alert("파일 사이즈 초과");
return;
}
if(regex.test(fileName)){
alert("해당 종류의 파일은 업로드할 수 없습니다.");
return false;
}
return true;
}
$("#uploadBtn").on('click', function(){
var formData = new FormData();
var inputFile = $("input[name='uploadFile']");
var files = inputFile[0].files;
console.log(files);
for(var i=0; i<files.length; i++){
if(!checkExtension(files[i].name, files[i].size)){
return false;
}
formData.append('uploadFile', files[i]);
}
$.ajax({
type : 'post',
url : '/uploadAjaxAction',
data : formData,
contentType : false,
processData : false,
dataType : 'json',
success : function(result){
console.log(result);
$(".uploadDiv").html(cloneObj.html());
showUploadFile(result);
}
});
});
var uploadResult = $(".uploadResult ul");
function showUploadFile(uploadResultArr){
//전달 받은 객체에서 '파일명'만을 화면에 li 태그로 출력 => uploadResult 내부에
var str = '';
$(uploadResultArr).each(function(i, obj) {
var fileCallPath = encodeURIComponent(obj.uploadPath +
"/" + obj.uuid +
"_" + obj.fileName);
str += '<li>';
str += '<a href="/download?fileName=' + fileCallPath + '">';
str += '<img src="/resources/img/attach.png" style="width:15px">' + obj.fileName;
str += '</a>';
str += '<span data-file="' + fileCallPath + '"> X </span>';
str += '</li>';
});
uploadResult.html(str);
}
//위 span(X) 에 클릭 이벤트
uploadResult.on('click','span',function(){
//var targetFile = 눌려진 객체의 fileCallPath 값 가져오기
var targetFile = $(this).data('file');
$.ajax({
type : 'post',
url : '/deleteFile',
data : {fileName : targetFile},//fileName키 : targetFile값
dataType : 'text',
success : function(result){
alert(result);
}
});
});
</script>
</body>
</html>
