使用javascript/Jquery获取HTML5文件的详细信息

Get HTML5 file details with javascript/Jquery?

本文关键字：文件 详细信息 HTML5 获取 javascript Jquery 使用      更新时间：2023-09-26

在通过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>

相关文章：