Question

我试图为单击文件上传操作编写一个“相对”通用函数，而不是使用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;
}

Answer 1

您不想等待click。您不希望用户单击时发生任何事情，而是希望他们选择发生某事。使用输入元素，您可以利用称为change或input的事件来提供此功能。

MDN inputFile

查看以下示例以了解我的意思

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

<input type="file">

Answer 2

使用回调。就像您使用.then

如果fileInput.click()不返回Promise（不能与回调.then链接），则可以将click（）包装在返回Promise的函数中

希望有帮助

Answer 3

您可能想为upload或submit事件设置功能。这意味着当触发该事件时，该文件已经被选取。那么您可以继续处理该函数中的文件。您不必在那里等待用户输入。
如果您真的想知道如何等待函数返回某些信息。有两种常用的方法
- 使用promise
functionA(input).then(outputFromFuncA => {<this is functionB>}).catch(e => {errorHandle});
- 使用async await，只需将function filePost(ev)作为异步函数，然后将await fileInput.click();

Javascript：在点击事件完成之前执行以下代码

3 个答案: