>

드래그 앤 드롭 파일 업로드 영역을 만들고 있습니다. 한 번에 여러 파일을 업로드하면 작동하지만 여러 단계에서 업로드를 지원할 수 있어야합니다. 아래 문제는 매번 파일을 설정한다는 것입니다.하지만 메소드가 호출 될 때마다 dFiles에 더 많은 파일을 추가하는 올바른 방법을 알 수 없습니다

   var dFiles;
    //var dFiles = []
    var holder = document.getElementById('holder');
    holder.ondrop = function (e) {
        e.preventDefault();
        dFiles = (e.dataTransfer.files);
        //dFiles.push(e.dataTransfer.files);
   }

dfile을 빈 배열로 초기화하고 파일을 추가하려고했습니다 (위 주석 처리). 나중에 파일 데이터를 읽을 때 데이터 형식 불일치 오류가 발생했습니다

for (var i = 0; i < dFiles.length; i++) {
    reader = new FileReader();
    reader.readAsDataUrl(dFiles[i]); //error
}


  • 답변 # 1

    e.dataTransfer.files  파일 목록입니다.

    dFiles 에 각 파일을 별도로 추가해야합니다 :

    var files = e.dataTransfer.files;
    for (var i = 0, l = files.length; i < l; i++) {
        dFiles.push(files[i]);
    }
    
    

    또는 ES6 방식 :

    dFiles.push(...e.dataTransfer.files);
    
    

관련 자료

  • 이전 javascript - 연속으로 약속을 실행하는 방법?
  • 다음 전체 일치에서 최소 문자 수와 만 일치하는 정규식