Диалог, открытый в функции Javascript, не позволяет выбрать файл - PullRequest
0 голосов
/ 28 апреля 2020

У меня есть эта кнопка на моей странице:

        <button type="button" class="btn btn-secondary" onclick="edit_arquivo(event,this);">
          <i class="far fa-edit"></i>
        </button>

с ассоциированной с ней функцией Javascript, где я хочу открыть диалоговое окно, чтобы выбрать файл для загрузки на сервер после. У меня есть этот код для открытия диалога:

  var input = document.createElement("input");
  input.type="file";
  input.click();

, который работает для открытия диалога, но также я замечаю, что после этого код продолжает выполняться или что-то, и в следующей части:

var file = input.files[0];
let name = file.name.split('.')[0] + '_' + (type=='versaoPaga'? 'pro' : 'lite');
let ext = file.name.split('.').pop();

Я получил ошибку, потому что input.files[0] возвращает неопределенное значение, так как у меня нет времени, чтобы выбрать файл в диалоговом окне на экране (даже если я выбрал и нажал ok, больше не имеет значения, после этой ошибки не выполняется никаких действий.)

Чтобы избежать этого, я также пытаюсь:

  var input = document.createElement("input");
  input.type="file";
  input.addEventListener("click", function(evt) {
    evt.stopPropagation();
    evt.stopImmediatePropagation();
  });
  input.click();

, что дает мне тот же результат.

Любой может дать намек на правильный путь к достижению sh что я хочу?

1 Ответ

0 голосов
/ 28 апреля 2020

... но также я замечаю, что после этого код продолжает выполняться или что-то в этом роде ...

Да, это так. Вызов click не останавливает код JavaScript и не заставляет пользователя выбирать файл. Веб-разработка - это все, что отвечает на события . В этом случае событие выбирает пользователь:

var input = document.createElement("input");
input.type="file";
input.addEventListener("change", function() {
    var file = input.files[0];
    let name = file.name.split('.')[0] + '_' + (type=='versaoPaga'? 'pro' : 'lite');
    let ext = file.name.split('.').pop();
});
input.click();
...