Ajax Pure Javascript 를 이용한 File upload

 

1. File Object 숨기기 위해 별도의 form을 하나 만들고 multipart로 설정한다. Cross-Site Request Forgery (CSRF) 공격을 방지하기 위해 token도 넣어준다.

<form id="file_form" method="post" enctype="multipart/form-data">{% csrf_token %}</form>

 

2. createElement를 이용하여 form에 file input을 추가한다.

var fileSelector = document.createElement('input');
fileSelector.setAttribute('type', 'file');
fileSelector.setAttribute('name', 'fileupload');
fileSelector.setAttribute('accept', 'image/*');

 

3. function 이 클릭 되었을 때 작동되는 것이므로 click 도 추가하고 안보이게 올릴 것이므로 display 도 none으로 추가한다.

fileSelector.click();
fileSelector.style.display = "none";

 

4. form에 넣어준다.

document.getElementById("file_form").appendChild(fileSelector);

 

5. 파일 객체에 파일을 추가할 때 ajax로 파일을 올릴 것이기 때문에 onchange를 만든다.

  fileSelector.onchange = function(){
    let nBytes = 0;
    let originFiles = fileSelector.files;
    let oAjaxReq = new XMLHttpRequest();
    oAjaxReq.open("POST", "upload_file", true);
    oAjaxReq.upload.addEventListener("progress", (e) => {
      console.log("upload is fired");
      console.log(e);
    })
    let file_form = document.getElementById("file_form");
    console.log(new FormData(file_form));
    var formdata = new FormData(file_form);
    oAjaxReq.send(formdata);

    oAjaxReq.onload = () => {
      console.log("onload is fired");
      if (oAjaxReq.status==200){
          console.log(xhr.responseText);
      }
    }

  };