問題
非表示になっているinput[type="file"]で選択した画像のサムネイルを表示するというものを作成した。
しかし、Android標準ブラウザでいくらボタンを押してもファイルのエクスプローラが立ち上がらない……。
標準ブラウザとか爆発しろ
解決案を探してみると、clickしたときにdisplay: none;を外すというのが書かれていた。
しかし、それだとエクスプローラが立ち上がってからdisplay: none;をつけるということで妙な動きが発生する可能性がある。
またdisplay: none;をつけるタイミングによってはエクスプローラが立ち上がらない事がある。
解決方法1
visibility: hidden; position: absolute; top: -200px; を設定する。
これだと大きさが確保されなくなるので、他のデザインにも影響を与えにくい。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fileinput</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.min.js"></script>
<script>
window.onload = () => {
var vm = new Vue({
data: function () {
return {
fileUrls: []
}
},
methods: {
submitFileButton: function (e) {
var input = e.target.parentElement.querySelector('input');
if (input) {
input.click();
}
},
showThumbnail: function(e) {
var self = this;
self.fileUrls = [];
var size = e.target.files.length;
for (var i = 0; i < size; i++) {
var fileReader = new FileReader();
fileReader.onload = function (e) {
self.fileUrls.push(this.result);
};
fileReader.readAsDataURL(e.target.files[i]);
}
},
remove: function (fileUrl) {
var index = this.fileUrls.indexOf(fileUrl);
this.fileUrls.splice(index, 1);
}
},
el: '#vue'
});
}
</script>
</head>
<body>
<section id="vue">
<div>
<button class="btn" @click="submitFileButton">ファイルを選択</button>
<!--
Android標準ブラウザではinput[type="file"]が非表示の場合エクスプローラが立ち上がらない
その為0pxでinput[type="file"]を置いておく
<input type="file" style="display: none;" @change="showThumbnail" accept="image/png,image/jpeg,image/gif ">
-->
<input type="file" style="visibility: hidden; position: absolute; top: -200px;" @change="showThumbnail" accept="image/png,image/jpeg,image/gif ">
<div v-if="fileUrls.length == 0">
画像をアップロードできるよ
</div>
<div v-else>
<div v-for="fileUrl in fileUrls">
<img :src="fileUrl" height="100%" width="100px">
<button @click="remove(fileUrl)">×</button>
</div>
</div>
</div>
</section>
</body>
</html>
過去の解決法
width:0; height:0; を設定する。
これだと見えなくなるが、幅などは設定されてしまっているので注意する。
備考
上記を解決しても、Android標準ブラウザでは、サムネイルが表示できる画像とできない画像がある。
ただし、カメラから取った画像は表示できる。
これについては解決できていない……標準ブラウザとか爆発しろ