image.png
点击“照片/视频”不触发相册或相机，一点反应都没有，但是在浏览器上调试没有一点问题。为什么呢？
后来看到一篇https://juejin.im/post/5c131793e51d4517bf65405c
发现需要判断是安卓还是ios对input控件的capture需求不一样。
安卓：
【微信】： 有capture，调相机； 无capture，相册相机一起调
【QQ】： 有captrue，相册相机一起调； 无capture，调相册
【浏览器】：有capture，调相机； 无capture，相册相机一起调IOS :
【微信】： 有capture，调相机； 无capture，相册相机一起调
【QQ】： 有capture，调相机； 无capture，相册相机一起调
【浏览器】：有capture，调相机； 无capture，相册相机一起调
结论：IOS表现行为一致，只要不加capture就可正常使用。安卓上需要设置capture属性
好啦！！上代码吧还是
html+mui
<div class="container">
<!-- 顶部导航栏 -->
<header>
<span onclick="jumpBack()">
<img src="./imgs/back.png" alt="back">
</span>
<span>发布论坛</span>
</header>
<!-- 发布论坛--内容 -->
<div class="words mui-input-row">
<textarea id="textarea" rows="6" placeholder="请输入您的感想..." maxlength="200" oninput="wordLength()"></textarea>
<p><span id="wordsLength" style="background: #fff;">0</span> / 200</p>
</div>
<!-- 上传视频、图片 -->
<div class="upload">
<div class="load_box add" id="load_box">
<input type="file" class="load_btn" id="uploadBtn" accept="image/*|video/*" style="opacity: 0;" />
<img src="./imgs/camera.png" alt="camera">
<span>照片/视频</span>
</div>
</div>
<!-- 发布 -->
<div class="btn">
<button id="forum" onclick="submit()">发布</button>
</div>
</div>
js部分
// 判断是安卓手机还是ios手机
function isAndroid_ios() {
var u = navigator.userAgent, app = navigator.appVersion;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
return isAndroid == true ? true : false;
}
// 上传文件部分
var uploadFile = [];
if (isAndroid_ios()) { //安卓
let up = document.getElementById('uploadBtn');
up.setAttribute('capture', 'camera');
$("#uploadBtn").change(function () {
uploadFile.push(this.files);
var fil = this.files;
for (var i = 0; i < fil.length; i++) {
reads(fil[i]);
}
});
} else { //ios
$("#uploadBtn").change(function () {
uploadFile.push(this.files);
var fil = this.files;
for (var i = 0; i < fil.length; i++) {
reads(fil[i]);
}
});
}
// 前端上传图片--回显
function reads(fil) {
var reader = new FileReader();
reader.readAsDataURL(fil);
reader.onload = function () {
$('.add').hide();
var img = "<div class='load_box' id='load_box'><img class='loadImg' src='" + reader.result + "'></div>";
$(".upload").prepend(img);
};
}
// 发布论坛-- 提交
function submit() {
var textarea = document.getElementById("textarea");
var formData = new FormData();
if (textarea.value == '') {
mui.toast('请输入您的感想');
} else if (uploadFile.length == 0) {
mui.toast('请上传照片或视频哟');
} else {
formData.append('request', uploadFile[0][0]);
formData.append('userId', userId);
formData.append('content', textarea.value);
$("#forum").disabled = true;
$.ajax({
url: config.addChatCircle,
type: 'post',
data: formData,
processData: false,//必填 必须false才会避开jq对formdata的默认处理 XMLHttpRequest才会对formdata进行正确处理,否则会报Illegal invocation错误
contentType: false,//必填 必须false 才会加上正确的Content-Type
success: function (res) {
if (res.status == 1) {
mui.toast('发布成功！');
jumpBack(); // 返回朋友圈列表
} else if (res.status == 0) {
mui.toast('发布失败！');
}
}
})
}
}
请多指教，共同进步哟~
