兼容安卓和苹果移动端就input调起手机相册和相机

Posted 2020-11-11 AndreaLi

以下这么写的话，苹果手机可以调起相机和相册功能，但是安卓手机只能调起相册；

<input id="upLicense" onchange="preview(this,0)" type="file" name="upLicense" >

<input id="upLicense" onchange="preview(this,0)" type="file" name="upLicense" accept="image/*" capture="camera">

而这么写的话，可以让安卓手机同时调起相机和相册，但是，苹果手机却只能调起相机：

<input id="upLicense" onchange="preview(this,0)" type="file" name="upLicense" accept="image/*" capture="camera" multiple>

所以，综上结合，可以在一开始的时候这么写：

<input id="upLicense" onchange="preview(this,0)" type="file" name="upLicense" accept="image/*" capture="camera" multiple>

然后在页面js中这么写：

$(function()){

　　compatibleInput();

}

// 判断当前是否属于ios移动端，兼容input同时调用手机相册和相机

function compatibleInput(){
　　//获取浏览器的userAgent,并转化为小写
　　var ua = navigator.userAgent.toLowerCase();
　　//判断是否是苹果手机，是则是true
　　var isIos = (ua.indexOf(‘iphone‘) != -1) || (ua.indexOf(‘ipad‘) != -1);
　　if (isIos) {
　　　　$("input:file").removeAttr("capture");
　　};
}