javascript文件阅读器获取名称？

我正在为我的网站编写一个简单的脚本来上传图片。我有一个由div单击触发的多文件输入

。当我对文件排队时，我希望能够删除一个文件。我知道我可以循环使用

$（'#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();
    });
});

函数readURL（输入）{
var files=$（'#hiddenFile'）[0].files；//其中files将是多文件输入的id
//或者使用document.getElementById（'files'）.files；
for（var i=0，f；f=files[i]；i++）{
var reader=new FileReader（）；
reader.onload=函数（e）{
console.log（f.name）；//如何获取
//文件名，将其作为属性添加到图像中？
$（“”）。附加到（“#imgBox”）；
};
reader.readAsDataURL（f）；
}
}
$（文档）.ready（函数（）{
$（文档）.on（'click'，'#addBtn'，函数（e）{
e、 预防默认值（）；
$（“#隐藏文件”）。单击（）；
});
});

---

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在这里的答案中那样将它全部封装在一个闭包中-。

尝试使用

change

事件，在一个iLife中定义

f

，将

title

属性值设置为

f.name

$（文档）.ready（函数（）{
$（文档）.on（'click'，'#addBtn'，函数（e）{
e、 预防默认值（）；
$（“#隐藏文件”）。单击（）；
});
$（“#hiddenFile”）.change（函数（事件）{
var files=this.files；
var i=0，
len=files.length；
（函数readFile（n）{
var reader=new FileReader（）；
var f=文件[n]；
reader.onload=函数（e）{
console.log（f.name）；
$("")
.附录（“#imgBox”）；
//如果'n'小于'len'，
//以递增的'n'作为参数调用'readFile'
如果（n

点击
您是否尝试在调试器中添加断点并查看objectUse“this”引用中的属性？一旦触发，就不会定义“f”，而是稍后触发的事件。或者将其他内容传递给该函数。不管你最终需要什么，太棒了。我想我离得很近但很远。关于这一点，我还有很多要学，但这是一个很大的帮助。非常感谢你！