在 Javascript 函数中打开的对话框不允许选择文件

Question

我的页面中有这个按钮：

        <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] 返回未定义，因为我没有时间 select 屏幕对话框中的文件（即使我 select 和单击确定，不再重要，该错误后不执行任何操作）。

为了尽量避免这种情况，我也尝试：

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

这给了我相同的结果。

任何人都可以提供有关完成我想要的正确方法的提示吗？

Answer 1

...but also I notice that after that, the code keeps being executed or something...

是的，确实如此。调用 click 不会停止 JavaScript 代码并使其等待用户选择文件。 Web 开发就是 响应事件 。在这种情况下，事件是用户选择文件：

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();

在 Javascript 函数中打开的对话框不允许选择文件

Dialog open in Javascript function don't allow selection of file

html

javascript

input

dom-events