83일차(2022.04.26) _ jQuery - Ajax로 파일 업로드

 

기본적으로 input 태그의 file 타입은 file의 값을 얻기 위해서 선택자.files 를 통해 가져올 수 있다.

 

기본적으로 파일은 한번 업로드 할 때 여러 파일을 업로드 하는 경우도 있는데,

그래서 file의 타입은 배열타입이다. 만약 한 개만 업로드한다면 file[0]을 통해 해당 파일을 선택할 수 있다.

 

그래서 해당 파일을 formData 객체에 append 해주면 되는데,

formData는 JS에서의 form태그와 똑같다고 생각하면 된다.

즉, 파일을 업로드 할 경우에 따로 파라미터를 보내줄 것이 더 있다면,

이  formData 객체에 모든 파라미터를 넣어준 다음에, 

ajax의 파라미터로 formData를 넘겨주면 된다는 소리이다.

 

	//add
	$("#add").click(function() {
		let formData = new FormData();
		let productName = $("#productName").val();
		let productPrice = $("#productPrice").val();
		let productCount = $("#productCount").val();
		let productDetail = $("#productDetail").summernote("code"); //$("#productDetail").val();
		$(".files").each(function(idx, item) {
			if(item.files.length>0){
				console.log(idx); 				//index번호
				console.log(item);              //<input type="file">
				console.log(item.files);        //input 태그의 file List
				console.log(item.files[0]);     //files list중 첫번째 파일
				console.log("lenth : ", item.files.length);
				console.log(item.files[0].name) //files list중 첫번째 파일의 이름
				//formData.append("파라미터명", 값);
				formData.append("files", item.files[0]);
			}
		});//each 끝
		
		formData.append("productName", productName);
		formData.append("productPrice", productPrice);
		formData.append("productCount", productCount);
		formData.append("productDetail", productDetail);
		
		
 		$.ajax({
			type:"POST",
			url:"./add",
		    processData: false,
		    contentType: false,
			data:formData /* {
				productName: productName,
				productPrice:productPrice,
				productCount:productCount,
				productDetail:productDetail
			} */,
			success:function(data){
				if(data.trim()=='1'){
					alert("상품 등록 완료");
					getList();
					$("#productName").val("");
					$("#productPrice").val("");
					$("#productCount").val("");
					$("#productDetail").summernote("code", ""); //$("#productDetail").val("");
				}else {
					alert("상품 등록 실패");
				}
				
			},
			error:function(){
				alert("error 발생");
			}
		}); 
		
	});