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

Question

在通过 html 文件 select 输入 select 文件 select 之后，您应该如何访问文件的详细信息？

我有这个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); });

有没有办法在 'change' 活动之外访问这些详细信息？例如，我认为这会起作用：

$("#file-select").files[0].name

但它没有，并给我一个“未捕获的类型错误：无法读取未定义的属性 '0''

知道我做错了什么吗？

Answer 1

因为 jQuery 没有文件属性作为对象的一部分，那是在 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>

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

Get HTML5 file details with javascript/Jquery?

html

javascript

jquery

file-upload