在通过html文件选择输入选择文件后,您应该如何访问文件的详细信息?
我有这个html:
<input type="file" id="file-select" name="attachment"/>
使用一些jquery,当文件输入更改时,我可以查看文件的详细信息,如下所示:
$('#file-select').change(function(){
var file = this.files[0];
var name = file.name;
var size = file.size;
var type = file.type;
console.log("File: " + file);
console.log("Name: " + name);
console.log("Size: " + size);
console.log("Type: " + type);
});
有没有办法在"更改"事件之外访问这些详细信息?例如,我认为这会起作用:
$("#file-select").files[0].name
但它没有,并给了我一个"未捕获类型错误:无法读取未定义的"的属性"0"
你知道我做错了什么吗?
因为jQuery没有作为对象一部分的files属性,这是DOM元素之外的。
$("#file-select").get(0).files[0].name
或
$("#file-select")[0].files[0].name
显示如何访问按钮点击上的输入的基本示例
$("button").on("click", function() {
var ol = $("ol").empty();
var files = $("#file-select").get(0).files;
for(var i=0; i<files.length;i++) {
var file = files[i];
var name = file.name;
var size = file.size;
var type = file.type;
$("<li>" + name + " - " + size + " - " + type + "</li>").appendTo(ol);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="file" id="file-select" name="attachment"/>
<button>List</button>
<ol></ol>