在拖放 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 元素的放置事件的地方。

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

}

在拖放 FileReader 时获取文件名

Get file name on drag and drop FileReader

html

javascript

jquery

filereader