input type=fileの使用可否判定

html5のfile apiを使えば、ローカルに保存されてる画像などのファイルへアクセスする事が出来ますが、現時点でのiOSではhtml5のinput type=”file”が使えないので画像をアップする、みたいなUIが提供出来ない。

で、input type=”file”が使えるかどうかの判定を使用として、ちょっぴり躓いたのでメモ。

最初に、file apiが使えるかどうかで判別しようとしてみた。

if(window.file){
 alert('hoge')
}

が、iOSでもwindow.fileはtrueが返ってきたのでこれだと駄目。。。

なんやかんやで、input type=fileの要素をhtml上に隠しておいておいて、disabledかどうかで判定を行うとうまくいった。

var check = document.getElementById('test').disabled;
alert(check)
<input type="file">

iOSではinput type=fileのUIはdisabledの状態になっていて、htmlのコードが下記のようになっている。

<input type="file" disabled="">

なので、getAttributeなどで属性値を参照しようとすると空文字が返ってくるが、プロパティにアクセスすれば適切な値が返ってくるみたい。

なんか他にいい方法があるのかなぁ、、、

input type=fileの使用可否判定

iPhoneとAndroidでUA判定する

iPhone/Androidで微妙にCSSを変えたい事が多いので、bodyにUAを判定してclassを設定するJavaScriptのメモ。

.iosとか.androidを起点にCSSを追加するだけでいいので結構便利。

本来ならもっと細かくUAを振り分けてもいいけれど、iPhoneかAndroidか程度で十分なので重宝してます。

1
2
3
4
5
6
7
8
9
(function(){
	var agent = navigator.userAgent,ua = '';
	if(agent.search(/iPhone/) != -1){
		ua = 'ios'
	}else if(agent.search(/Android/) != -1){
		ua = 'android'
	}
	if(ua) document.querySelector('body').setAttribute('class',ua)
})();
iPhoneとAndroidでUA判定する