Question

使用引导程序输入文件的Angular4应用程序允许用户从磁盘中选择文件。

在我的HTML中，我有以下

<label class="btn btn-primary">
    Import
    <input type="file" (change)="import($event)" hidden>
</label>

如果我从文件选择器中选择file1并单击OK，则会调用导入函数。如果我做了一些其他的事情，我点击文件选择器来显示文件选择对话框，我仍然点击文件1，我没有得到导入功能，因为我觉得没有变化，只要文件选择器是关注。

我是否可以使用其他事件，因此每当用户选择文件并按下确定时，我都会被调用？

还是其他任何想法？

Answer 1

如果您不想使用JQuery，可以使用

运行该文件

<input id="file" onchange="file_changed(this)" onclick="this.value=null;" type="file" accept="*/*" />

＆＃13;

<form enctype='multipart/form-data'>
  <input onchange="alert(this.value); return false;" type='file'>
  <br>
  <input type='submit' value='Upload'>
</form>

＆＃13;

使用JQuery

＆＃13;

let $c  = $("#container");
let $f1 = $("#container .f1");

function FChange() {
    alert("f1 changed");
    
    $(this).remove();
    $("<input type='file' class='f1' />").change(FChange).appendTo($c);
}

$f1.change(FChange);

＆＃13;

.f1 { z-index: 2 }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
    <input type="file" class="f1">
</div>

＆＃13;

删除文件元素并将其添加到change事件的相同位置。它将擦除文件路径，使其每次都可以更改。

bootstrap输入文件（更改）事件未被触发

1 个答案: