Javascript: следующий код выполняется до завершения события click - PullRequest
Новая
       68

Javascript: следующий код выполняется до завершения события click

0 голосов
/ 16 октября 2018

Я пытаюсь написать «относительно» общую функцию для действия загрузки файла одним щелчком мыши, а не использовать плагин jQuery fileupload.Все отдельные шаги работают нормально, если они выполняются последовательно, но у меня возникают проблемы с тем, что остальная часть моей функции выполняется до того, как пользователь выберет файл для загрузки.Я был бы очень признателен за любые предложения о том, как заставить мой JS ждать своих пользователей:

Функция: 

function filePost(ev) {
  var anch = getAnchor(ev);
  var form = document.querySelector(anch.dataset.form);
  var fileInput = form.querySelector('input[type="file"]');

  fileInput.click(); //<- CLICK EVENT I WANT TO WAIT FOR

  var url = form.getAttribute('action');
  var reloadTarget = anch.dataset.reload;
  var data = new FormData(form);
  var prom = fetch(url, {
    method: form.getAttribute('method'),
    credentials: 'same-origin',
    body: data
}).then(function (resp) {
    return resp.json();
}).then(function (response) {
    if (response.is_valid) {
        var html = response.html;
    } else {
        var html = response.err_msg;
    }
    document.querySelector(reloadTarget).innerHTML = html;
}).catch(function (err) {
    console.log(err);
});
return prom;
}

Ответы [ 3 ]

0 голосов
/ 16 октября 2018

Использовать обратный вызов.Так же, как вы используете .then

Если fileInput.click() не возвращает Promise (который не может быть связан с обратным вызовом .then), вы можете заключить click () в функцию, которая возвращает Promise

Надеюсь, это поможет

0 голосов
/ 16 октября 2018

  1. Вы можете установить функцию для события upload или submit.что означает, что когда событие сработает, файл уже выбран.тогда вы можете продолжить обрабатывать файл в функции.вам не нужно ждать ввода пользователя там.

  2. , если вы действительно хотите знать, как ждать, пока функция вернет что-то.Есть два распространенных способа сделать это

    • с использованием promise

    functionA(input).then(outputFromFuncA => {<this is functionB>}).catch(e => {errorHandle});

    • с использованием async await,просто сделайте function filePost(ev) асинхронной функцией и введите await fileInput.click();
0 голосов
/ 16 октября 2018

Вы не хотите ждать click.Вы не хотите, чтобы что-то происходило, когда пользователь щелкает, вы хотите, чтобы что-то происходило, когда они выбирают что-то.Используя элемент input, вы можете использовать события, называемые change или input, чтобы обеспечить эту функциональность.

MDN inputFile

Посмотрите на приведенный ниже пример, чтобы понять, что я имею в виду: 

document.querySelector("input").addEventListener("change", function(e) {
console.log("do something with " + this.value);
});
<input type="file">
...