Запустить вызов функции по нажатию кнопки «Открыть» в диалоге загрузки файла.

Question

При нажатии кнопки «Импорт CSV» я хочу открыть «Проводник диалога открытия файла», а при выборе файла и нажатии «Открыть» в проводнике должен вызвать вызов функции (функция addCSVFile ()). Как мне этого добиться?

My. js выглядит следующим образом:

<input type="button" class="btn-import" id="loadFileXml"  value="Import CSV"
       onclick="document.getElementById('file').click();"/>
<input type="file" style="display:none;" id="file" name="file"/>

onchange и ng-change, которые я пробовал. но оба не работают. Пожалуйста, помогите мне в этом.

Answer 1

Я нашел решение, чтобы решить эту проблему:

*. html я изменил как показано ниже

<input type="button" class="btn-import" id="loadFileXml" value="Import CSV"
       ng-click="vm.file_changed()"/>
<input type="file" style="display:none;" id="file" name="file" accept=".csv"
       script-upload="vm.fileToUpload"/>

*. js

function file_changed() {
    $('#file').click();
}

function onScriptSelect(files) {
    var filename = files[0].name;
}

Answer 2

Ну, я не знаю angular js, но этот простой jquery должен работать, если вы не возражаете против его использования ...

<script src="https://ajax.googleapis.com/libs/jquery/3.4.1/jquery.min.js"></scipt>
<script type="text/javascript">
$(document).ready(function(){
      $("#file").on('change',function(){
        //do whatever you want
      });
});
</script>

Вы также можете использовать для атрибута наклейка вот так ...

<label for="file" class="btn-import" id="loadFileXml">Import File</label>
<input type="file" style="display:none;" id="file" name="file"/>