为什么 iPhone 的 Safari 不触发输入类型 = 文件的更改事件？答案

【问题标题】：Why doesn't iPhone's Safari trigger changed event on input type=file?为什么 iPhone 的 Safari 不触发输入类型 = 文件的更改事件？
【发布时间】：2017-08-16 23:34:17
【问题描述】：

有一部 iPhone，需要在隐藏的输入上捕获 change 事件。在 PC 上打开时，它可以工作，我看到 changed 文本。如果我在 iPhone 上打开它，它不能按预期工作，我只会看到 open dialog。

简单的jsfiddle demonstrates this。

<input type=file style="display:none" id=file>
<button type=button id=but>open</button>

<div id=out>
</div>

和

$(document).ready(function(){
  $('#but').on('click touchend', function(){
    $('#out').text('open dialog'); 
    $('#file').click();
  });
  $('#file').on('change', function(evt) {
    $('#out').text('changed');
  });
});

它有什么问题？难道是iOs的新bug？ Afaik，它在一个月前才起作用。

我尝试将hidden 替换为opacity:0，它适用于简单的jsfiddle，但不适用于隐藏侧边栏的复杂项目。问题如下。如何进行简单的修复以及最近发生了什么变化（一些 Safari 更新？）导致隐藏输入行为的变化？

【问题讨论】：

尝试删除 display:none css 样式，如果可行，请尝试 opacity:0，css 可能会阻止该操作（我相信过去这是一个问题）
嗯。该技巧适用于 Safari 和 iPhone5S 上的 Chrome。这是什么字节？
您是在 Iphone 浏览器中运行它还是在类似 android 的 webview 中运行它？如果我理解正确，您希望人们可以上传文件吗？但这并没有发生它没有打开文件管理器？我是对的还是我理解错了？
它是 Safari 浏览器。对，我想要一个 ajax 上传。
我很难重现这种情况，因为我所有的 iOS 都可以在您的代码中正常工作。您使用的是哪个 iOS 版本？您是否考虑过将输入文件元素放在按钮顶部，给出opactity:0; 并使大小与按钮相同？这个技巧应该总是有效的。

标签： javascript jquery ios iphone

【解决方案1】：

您可以使用label 的for 属性。以下代码可能对您有所帮助：

$('#file').on('change', function () {
  $('.button').text('changed')
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='file' style='display:none' id='file'>
<label for='file' class='button'>open</label>

使用label，您可以为上传按钮使用自定义样式

但是，在某些手机浏览器中，当你再次上传文件时，如果文件与之前相同，则不会触发change事件，你可以使用form的reset方法来清除文件：

 $('#file').on('change', function () {
      $('.form')[0].reset()
      $('.button').text('changed')
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class='form'>
  <input type='file' style='display:none' id='file'>
    <label for='file' class='button'>open</label>
</form>

【讨论】：

太棒了。有用。我刚刚用label 标签更改了<a>，我看到了changed 事件。但为什么呢？
适用于 Chrome 和 Safari。谢谢。