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

【问题标题】：javascript file input onchange not working [ios safari only]javascript 文件输入 onchange 不起作用 [仅限 ios safari]
【发布时间】：2018-05-19 18:32:51
【问题描述】：

以下代码可在除 safari mobile 之外的任何地方使用。显然 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();

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

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

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

【问题讨论】：

onchange 在客户端实际选择一个或多个文件之前不会被触发。 .click() 可能无法在 <input type='file' /> 上的某些浏览器中运行。
.click 适用于我能够测试的所有内容，并且文件选择器在 safari iOS 上正确打开。没有触发的是 onchange 在文件被选中并且选择对话框关闭之后。

标签： javascript ios safari onchange

【解决方案1】：

我该死的：在 iOS Safari 上，与其他浏览器相比，需要两个额外条件：

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

2) 设置 .onchange 不起作用：必须改用 addEventListener。

【讨论】：

谢谢你！花半天时间来解决这个问题。奇怪的是，这不是纯粹的 iOS 问题。例如，iPad 上的 iOS 11 可以工作，但 iPhone 上的 iOS（6+ 和 iOS 11 和 7 和 iOS 10）没有。
不起作用。你能澄清一下为什么或在哪里找到这些信息吗？我从更改事件中得到的只是一个显示 { isTrusted: true} 的对象。在其他浏览器上，我得到 event.target.files 数组。
确保在 onchange 触发之前不要删除输入！在点击事件之后，我正在愚蠢地删除它。
在我的情况下不需要使用 addEventListener，但是将输入添加到 dom 就可以了：document.body.appendChild(input); input.onchange = () => { // 处理更改事件 document.body.removeChild(input) }
@UladKasach 令人心碎的反复试验:)