iOSのWebViewでファイルアップロードダイアログを呼び出せなかった話
3981 ワード
デフォルトのファイルダイアログは格好悪いので、画像などを代替として、クリックした際のイベントでファイル選択のダイアログを出したいという時はよくありますよね。
例えばこんな感じのコードで。
<img class="camera-icon select-photo" src="camera.png" />
<input type="file" id="cameraImageFile" />
<script>
document.querySelector('.select-photo').addEventListener('click', (e) => {
document.querySelector('#cameraImageFile').click();
});
</script>
PCのブラウザであれば動くのですが、iOSではなぜかダイアログが開かず…。
document.querySelector('.select-photo').addEventListener('click', (e) => {
alert(true);
document.querySelector('#cameraImageFile').click();
});
とやったりすると、アラートが出た後にファイル選択が出るという…。HTML側のスタイルを変えたり、JavaScriptの書き方を変えたりと色々やったのですが結局うまくいく方法がこれ。
document.querySelector('.select-photo').addEventListener('click', (e) => {
e.target.click();
document.querySelector('#cameraImageFile').click();
});
元々の画像を2回クリックしたことにすると、その後の処理もちゃんと呼ばれると。なぜかが分かっていないので微妙な気持ちですが…。
なお、Androidはちゃんと動くので、iOSかどうかの判定も追加しておく必要があります。
Author And Source
この問題について(iOSのWebViewでファイルアップロードダイアログを呼び出せなかった話), 我々は、より多くの情報をここで見つけました https://qiita.com/goofmint/items/179f6cb7c7e18062e461著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .