如何使用javascript从文件对话框中捕获文件选择？答案

【问题标题】：How to capture file selection from a file dialog box using javascript?如何使用javascript从文件对话框中捕获文件选择？
【发布时间】：2023-03-29 04:15:02
【问题描述】：

我使用下面的代码使用 java 脚本创建了一个文件对话框

var input = $(document.createElement('input'));
input.attr("type", "file");
input.trigger('click');

使用上面的代码可以正确显示文件对话框。

如果使用“文件”对话框中的“打开”按钮选择了文件，我如何捕获文件名和其他详细信息？

使用已选择的文件我想使用 ajax 请求将选择的文件上传到服务器

我已经尝试了以下几个选项来捕获对“打开”按钮的点击。但这无济于事。有什么建议吗？

input.onchange = function(e) {
alert("File Selected"); 
};  

input.onclick = function(e) {
alert("File Selected");
};

【问题讨论】：

使用一些开源文件上传插件。 github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin

标签： javascript ajax filedialog

【解决方案1】：

file 输入有一个名为files 的特殊属性。您可以按如下方式访问它们（作为数组，如果您指定了 multiple 属性）：

var files = input.files;

MDN documentation 声明：

这种类型的对象由 HTML 的 files 属性返回 <input> 元素；这使您可以访问选择的文件列表 <input type="file"> 元素。它也用于文件列表使用拖放 API 时拖放到 Web 内容中；见 DataTransfer 对象了解此用法的详细信息。

【讨论】：