通过拖放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.fileName)我自己也尝试console.log(event.target.files[0].name)和console.log(event.dataTrasfer.files[0]).有人可以帮帮我吗.

Answer 1

你在哪里叫reader.readAs ...方法？

AFAIK,获取文件名的正确位置是您注册dom元素的drop事件的位置.

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);

}