끌어서 놓기에 파일 이름 가져 오기 FileReader

Question

안녕하세요. 원시 HTML5 끌어서 놓기를 사용하여 파일을 서버에 업로드하고 있습니다. 로컬 시스템에서 업로드되는 파일의 이름을 얻고 싶습니다. 드롭 존에서 파일을 삭제할 수 없습니다. 아래 코드는 내가 시도한 것이다. 어떤 도움을

var reader = new FileReader(); 
    reader.onload = function (event) { 
     var childrenDivs = document.getElementById("holder").children 
     var temp  
     if(childrenDivs.length > 0){ 

      var lastDiv = childrenDivs[childrenDivs.length - 1] 
      temp = parseInt(lastDiv.id.split("_")[1]) + 1 
     }else{ 

      temp = 1 
     } 
     var imageDiv = document.createElement('div') 
     imageDiv.id = "uploadedImage_"+temp 
     var image = new Image(); 
     image.src = event.target.result; 
     console.log(event.target.fileName) 

대신 나는 또한 console.log(event.target.files[0].name) 및 console.log(event.dataTrasfer.files[0]) 시도 console.log(event.target.fileName)

을 감상 할 수있다. 아무도 여기 좀 도와 줄래?

Answer 1

어디에서 reader.readAs ... 메소드를 호출합니까?

AFAIK, 파일 이름을 얻는 적절한 위치는 dom 요소의 놓기 이벤트를 등록하는 곳입니다.

element.ondrop = function(e) { 
    e.preventDefault(); 

    var reader = new FileReader(); 
    reader.onload = function (event) { 
     .... 
    } 

    var file = e.dataTransfer.files[0]; 
    // can get the name of the file with file.name 
    console.log(file.name); 
    reader.readAsBinaryString(file); 

}