javascript FileReader獲得名稱？

Question

我正在為網站上傳一個簡單的腳本。 我有一個由div單擊觸發的多文件輸入<input type = 'file' name = 'files[]' id = 'hiddenFile' multiple> 。 當我將文件排隊時，我希望能夠刪除其中一個文件。 我知道我可以遍歷$('#hiddenFile').val()並進行拼接以獲取名稱，但是在確定文件名時遇到了問題。 將文件分配給新的img容器時，如何獲取名稱？ 我試過console.log(f.name)和一些變體，但它返回未定義的錯誤。 這是我的腳本。 我想我已經很接近了，但這是我正在學習的東西。 謝謝！

function readURL(input) {
var files = $('#hiddenFile')[0].files; //where files would be the id of your multi file input
//or use document.getElementById('files').files;

    for (var i = 0, f; f = files[i]; i++) {

        var reader = new FileReader();

        reader.onload = function (e) {
            console.log(f.name); //how can I get the 
                                 //file name here to add it to the image as an attribute?
            $("<img src = '"+e.target.result+"' class = 'addedImg'>").appendTo("#imgBox");
        };

        reader.readAsDataURL(f);

    }
}

$(document).ready(function(){
    $(document).on('click', '#addBtn', function(e){
        e.preventDefault();
        $('#hiddenFile').click();
    });
});

Answer 1

嘗試使用change事件，在IIFE中定義f ，將title屬性值設置為f.name

 $(document).ready(function() { $(document).on('click', '#addBtn', function(e) { e.preventDefault(); $('#hiddenFile').click(); }); $("#hiddenFile").change(function(event) { var files = this.files; var i = 0, len = files.length; (function readFile(n) { var reader = new FileReader(); var f = files[n]; reader.onload = function(e) { console.log(f.name); $("<img src=" + e.target.result + " class=addedImg title=" + f.name + ">") .appendTo("#imgBox"); // if `n` is less than `len` , // call `readFile` with incremented `n` as parameter if (n < len -1) readFile(++n) }; reader.readAsDataURL(f); // `f` : current `File` object }(i)); // `i` : `n` within immediately invoked function expression }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <div id="addBtn">click</div> <input type="file" style="display:none" id="hiddenFile" multiple /> <div id="imgBox"></div> 

Answer 2

FileReader對象本身無權訪問文件名。 正如在for循環中所做的那樣，當您遍歷文件列表時會得到文件名。

var reader = new FileReader();

reader.onload = function (e) {
    //update image src or something
};

for (var i = 0, f; f = files[i]; i++) {
    reader.readAsDataURL(f); //updates image src or something
    //additional method to do something with file name goes here
}

而且，如果您真的想讓一個方法在for循環中完成這兩件事，則可以將其全部包裝在閉包中，就像@ebidel在他的答案中一樣- 在FileReader異步加載文件后獲取文件名＃answer-12547471 。