Question

点击选择文件的时候。它会打开对话框窗口来选择要上传的文件，但我想知道当我们点击选择文件时会发生什么，以及该diolog窗口是如何出现的。

提前致谢。

Answer 1

当我们点击选择时，应该会有一些事件触发文件。我需要知道那件事是什么。

请参阅GlobalEventHandlers.onchange，Using files from web applications，4.10.5.1.18 File Upload state (type=file)

＆＃13;

var input = document.querySelector("input[type=file]");
input.onchange = function(event) {
  console.log(event.target.files)
}

＆＃13;

<input type="file" />

＆＃13;

Answer 2

HTML5为所有控件定义了一个files属性。此集合是一个FileList，它是一个类似于数组的结构，称为FileList，包含控件中每个选定文件的File对象（请记住，HTML5允许在这些控件中选择多个文件）。因此，在任何时候，您都可以使用与此类似的代码访问用户选择的文件：

<input type="file" id="your-files" multiple>
<script>
var control = document.getElementById("your-files");
control.addEventListener("change", function(event) {

    // When the control has changed, there are new files

    var i = 0,
        files = control.files,
        len = files.length;

    for (; i < len; i++) {
        console.log("Filename: " + files[i].name);
        console.log("Type: " + files[i].type);
        console.log("Size: " + files[i].size + " bytes");
    }

}, false);
</script></code>

这个相对简单的代码侦听文件控件上的change事件。当事件触发时，它表示文件选择已更改，并且代码遍历每个File对象并输出其信息。请记住，始终可以从JavaScript访问files属性，因此您无需等待更改即可尝试读取它。

有关详细信息，请查看以下网址。

https://www.nczonline.net/blog/2012/05/08/working-with-files-in-javascript-part-1/

https://en.wikipedia.org/wiki/File_select

如何通过input type = file上传文件打开windows对话框窗口

2 个答案: