다중 이미지 업로드, FormData

다중 이미지

파일을 업로드 하기 위한 태그는 input태그의 file타입을 사용하면 된다.

이미지만 가능하기위해 accept='image/*' 속성을 추가하고 

다중 이미지 업로드를 위해 multiple을 추가한다.

onchange속성으로 이미지 선택 후의 행동을 정할 수 있다.

 

<input id="upload-files" type="file" onchange="upload()" accept='image/*' multiple>

<script> 
 function upload() {
    uploadFiles = document.getElementById("upload-files").files;
    var uploadedDiv = document.getElementById("uploaded-files-div");

    if (uploadFiles.length != 0) {
      console.log(uploadFiles);
      uploadedDiv.style.display = "block"; // 영역 보이게 변경
      for (var i = 0; i < uploadFiles.length; i++) {
        let addFileName = document.createElement('p'); // p태그 생성
        addFileName.innerHTML = uploadFiles[i]['name']; // 파일 이름
        uploadedDiv.style.fontSize = "12px"; // 폰트크기
        uploadedDiv.appendChild(addFileName); // div 안에 넣음
      }

    } else {
      console.log("upload files null");
    }
  }
</script>

 

위의 upload()는 통해 이미지 선택 후 이미지 파일 이름을 동적으로 추가하는 함수이다.

createElement('태그')를 통해 태그를 생성하고 aapendChild(추가할 태그)를 통해 upload-files-div라는 id를 가진 div태그에 넣어주는 것이다.

 

 

 

XMLHttpReqeust를 사용해 업로드

FormData에 데이터를 하나씩 넣으면 된다. append(키, 값)으로 넣는다.

 

<script>
  // XMLHttpRequest 객체 생성
  var httpRequest;
  
  // 인터넷 브라우저별로 달라서 체크해줌
  if (window.XMLHttpRequest) {
    httpRequest = new XMLHttpRequest();
  } else {
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
  }
  
  // 업로드 버튼 클릭 함수
  document.getElementById("submit-btn").addEventListener('click', () => {

    var text = document.getElementById("text").value;
    
    // formData 생성
    let formData = new FormData();
    formData.append("text", text); // 키-값으로 추가

    for (var i = 0; i < uploadFiles.length; i++) {
      formData.append("files", uploadFiles[i]); // 이미지 파일 추가
    }

    // formData 전송 시 설정
    formData.enctype = 'multipart/form-data';
    formData.method = 'post';
    formData.action = requestUrl;
    
    // 통신 함수
    httpRequest.onreadystatechange = function() {
      // 통신 후
      if (httpRequest.readyState === XMLHttpRequest.DONE) {
        // 성공
        if (httpRequest.response['success']) {
          alert('success');
          window.close();

        } else {
          alert('request error!');
        }
      }
    }
    
    httpRequest.open("POST", requestUrl, true); // 요청 정보 입력 (방식, url, 비동기여부)
    httpRequest.responseType = "json"; // 응답타입
    // httpRequest.setRequestHeader("Content-Type", "application/json"); // 헤더
    // httpRequest.send(JSON.stringify(data)); // 데이터와 함께 요청 - 일반 map형식일 경우
    httpRequest.send(formData); // 데이터와 함께 요청
      
  });
  
  
</script>