<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>파일 업로드</title>
<!-- css 파일을 불러오는 코드 -->
<!-- 아이콘 사용을 위한 Font Awesome 6 CDN -->
<link rel="stylesheet" type="text/css"
<!-- 구글 웹 폰트 사용을 위한 CDN -->
<!-- 내가 만든 CSS 파일-->
<link rel="stylesheet" type="text/css" href="./css/reset.css">
<link rel="stylesheet" type="text/css" href="./css/commons.css">
<link rel="stylesheet" type="text/css" href="./css/test.css">
<style>
</style>
<!-- swiper cdn -->
<!-- jquery cdn -->
<!-- javascript 작성 공간 -->
<script>
//목표 : 설정하기 버튼을 누르면 선택된 파일을 업로드 하고 이미지 변경
$(function () {
$(".btn-save").click(function () {
//파일 선택창을 JavaScript 형태로 불러와야함(내장API사용)
//var input = document.querySelector(".file-chooser");
var input = $(".file-chooser")[0];
//input이 file일 경우에만 files라는 항목이 존재
console.log(input.files);
if (input.files.length == 0) return;
//비동기 통신
// -form으로 파일을 전송할때 multipart/form-data 설정을 했엇다.
// -비동기통신일때는 무슨 처리를 해야하는가?
// -processData : false로 설정
// -contentType : false로 설정
// -FormData 객체를 만들어 파일을 추가한뒤 전송
var form = new FormData();
//form.append("이름","데이터");
form.append("attach",input.files[0])
$.ajax({
url: "http://localhost:8080/restfile/upload",
method: "post",
processData: false,
contentType: false,
data: form,
success: function (response) {
//이미지의 Src를 바꾸는 코드
console.log(response);
console.log(response.attachNo);
$("img").attr(
"src", "http://localhost:8080/restfile/download?attachNo="+response.attachNo);
},
});
});
});
</script>
</head>
<body>
<input type="file" class="file-chooser">
<button type="button" class="btn-save">설정하기</button>
<hr>
</body>
</html>
'Javascript' 카테고리의 다른 글
| 카카오 지도 다루기 (1) | 2023.11.15 |
|---|---|
| Kakao 지도 시작하기 (0) | 2023.11.14 |
| 파일 업로드 (0) | 2023.11.10 |
| 써머노트(Summernote) (0) | 2023.11.09 |
| 이미지 슬라이더(Swiper) (1) | 2023.11.08 |