javascript 文件输入 onchange 不起作用 [仅限 ios safari]

Question

下面的代码适用于除 Safari 移动设备之外的任何地方。 显然 onchange 永远不会被触发。

 // create a hidden file input element
 var input  = document.createElement("input");
 input.type = "file";
 
 // when the input content changes, do something
 input.onchange =
 function(event)
 {
  // upload files
 }

 // Trigger file browser
 input.click();

我发现了类似的示例，但它们都指的是甚至存在文件输入的其他可见表示形式的场景，并且它们都涉及表单清除解决方法。这在这里行不通。

单击图片时会调用此代码，以便上传新图片作为替换。

有什么提示吗？我做错了什么吗？

Answer 1

天哪：与其他浏览器相比，iOS safari 需要两个额外的条件：

1）输入必须实际附加到 DOM。

2) 设置 .onchange 不起作用：必须使用 addEventListener 来代替。

Answer 2

应该将输入元素附加到真实的 dom 中。

    // create a hidden file input element
 var input  = document.createElement("input");
 input.type = "file";

 document.body.appendChild(input);

 // when the input content changes, do something
 input.onchange =
 function(event)
 {
  // upload files
document.body.removeChild(input)
 }

 // Trigger file browser
 input.click();

Answer 3

我在 iOS 12 / Safari 12 中遇到了这个问题，只需创建一个

addEventListener

就解决了我的问题。 例如

fileInputFiled.addEventListener("change", (event) => { this.submit(event) })