다중 파일 업로드

사용 방식

input type=file + multiple

<input type="file" **onchange="fileInput1(this.files)"** multiple accept=".gif,.jpg,.png,.jpeg"/>

onchange="fileInput1(this.files)" : input태그의 상태가 바뀌면 실행되는 함수
(this.files) : this는 사용자의 this와 같음
(this.files) : files는 file 객체의 속성을 files라 함

배열 활용

var fileArr = new Array(); // 파일 저장하기 위한 배열
var maxFileUpload = 10; // 최대 올릴 수 있는 파일 수

function fileInput1(files) {

	var count = 0;
	**let arr = Array.from(files);** // Array.from() -> 파일 객체 배열을 배열로 바꿔줌 / 일반적인 파일 객체 배열은 추가변경이 안된다 함
	
	for(var i = 0; i < files.length; i++){ // 확장자 검사
	var lastDot = files[i].name.lastIndexOf('.');
    var fileLen = files[i].name.length;
    var fileName = files[i].name;
    var fileDotName = files[i].name.substring(lastDot, fileLen).toLowerCase();
    var useFileDotName = [".gif", ".jpg", ".png", ".jpeg"];
    var exists = useFileDotName.some(item => item == fileDotName);
	    if(!exists){
			alert(fileName + '은 올릴 수 없습니다. .gif, .jpg, .png, .jpeg 확장자만 가능합니다.');
			arr = arr.filter(item => item.name !== fileName); // 적용시킨 확장자 외 파일이 올라올 시 걸러서 저장
			continue;
		}
	}
	
	// 미리보기 넣을 곳
	const fileList = document.getElementById('uploadFiles');
	
    if(fileArr.length > maxFileUpload){
    	alert("최대 " + maxFileUpload + "개의 이미지만 업로드할 수 있습니다.");
    } else{
	    for(let i=0; i<arr.length; i++) { // let 써야함 let - 스코프 내 고정
	    	if(fileArr.length >= maxFileUpload){ 
	    		fileArr.splice(maxFileUpload); // splice로 maxFileUpload에 대입한 숫자만큼 뒤에 내용을 자름
	    		alert("최대 " + maxFileUpload + "개의 이미지만 업로드할 수 있습니다.");
	    		break;
	    	} else{
	    		console.log("else");
				**fileArr.push(arr[i]);** // 실질적으로 저장되는 파일들
				const item = document.createElement('div');
				const item1 = document.createElement('p');
				item1.setAttribute('class', 'previewFileName');
				const fileName = document.createTextNode(arr[i].name);
				const previewImage = document.createElement('img');
				previewImage.setAttribute('class', 'previewImage');
				previewImage.setAttribute('src', '#');
				const deleteButton = document.createElement('button');
				deleteButton.addEventListener('click', (event) => { // 버튼에 클릭시 어떤 이벤트 발생시킬지 저장
					item.remove();
					event.preventDefault();
					deleteFile(arr[i]);
				});
				deleteButton.innerText="X";
				item.appendChild(previewImage);
				item.appendChild(item1);
				item1.appendChild(fileName);
				item.appendChild(deleteButton);
				fileList.appendChild(item);
	    	}
		}
    }
      
	var inputFile = document.querySelector('input[name="imageFile"]');
	**var dataTransfer = new DataTransfer();** // 일반 배열을 파일 객체 배열로 바꿔주는 애
	fileArr.forEach(file => {
		**dataTransfer.items.add(file);**
		displayImages(file, count);
		count++;
	})
	
	**inputFile.files = dataTransfer.files;** // 일반배열 -> 파일객체 배열로 바꾼애를 input type=file 태그에 넣음
	$(".nowFileCount").text(document.getElementById('fileInput').files.length); // 현재 업로드된 파일 수
}

Array.form() : 파일 객체 배열은 말이 배열이지 실제론 배열처럼 작동하지 않아 일반 배열로 변경해줘야 사용 가능. Array.form(객체)로 해주면 일반 배열로 바꿔줌
fileArr.push(일반배열로바꿔서저장한배열) : 파일의 정보를 저장할 배열
var dataTransfer = new DataTransfer() : 아까전 저장한 fileArr안에 들어있는 배열들을 file 객체에 맞게 변경
inputFile.files = dataTransfer.files : 최종적으로 파일들에 대한 정보가 들어가는 곳(input type=file태그)