Question

我在Typescript中创建一个NodeJS项目，其中我有一个“文件”输入类型 - 用于选择和上传文件。我希望能够在用户选择文件的名称后立即获取文件的名称，即使在上传之前也是如此。为此，我编写了一些无效的代码。

这是用于选择文件的HTML。

<form id=\"" + this.id + "\" accept-charset=\"utf-8\" method=\"post\" action=\"/upload\" enctype=\"multipart/form-data\">
<input id=\"inp\" type=\"file\" name=\"userfile\" multiple=\"multiple\" />
</form>

这是在进行更改时应该被触发的事件：

$("input[id=inp]").change(function () {
   alert("Changed");
   /*for (var i = 0; $("#" + this.id + "input").get(0).files.length; ++i) {
       alert(i + ". Name : " + this.JQuerySelector().get(0).files[i].name);
   }*/});

此事件未被解雇。我已经编写了一些用于提取所选文件名的代码，我无法测试，因为选择文件时不会发生“更改”事件（请参阅更改函数中的注释代码）。我已经尝试将事件处理程序添加到表单和单个输入，并通过名称或ID选择它们。但它没有得到调用。我从这个页面得到了我的代码：

http://jsfiddle.net/j08691/gSBCd/

此外，我也在寻找方法：

隐藏“选择文件”及其旁边所选文件的列表按钮，然后从其他自定义构建按钮开始选择。
每次进行选择时，都能够提取所选文件的名称。

Answer 1

由于input[id=inp]元素是动态创建的，因此您需要使用事件委派来为这些元素注册事件处理程序。

当您使用$('input[id=inp]').change(....);注册事件处理程序时，它会将句柄只注册到代码执行时已存在于dom中的那些元素，在这种情况下，因为这些元素是在此之后创建的处理程序不会附加到新创建的元素

试试这个

$(document).on('change','input[id=inp]',function() {

});

DEMO

无法从文件选择器获取所选文件的名称

1 个答案: