app原生开发+h5(表单input上传图片在安卓上失效)

2020-01-07  本文已影响0人  小小_128
image.png

点击“照片/视频”不触发相册或相机,一点反应都没有,但是在浏览器上调试没有一点问题。为什么呢?
后来看到一篇https://juejin.im/post/5c131793e51d4517bf65405c
发现需要判断是安卓还是ios对input控件的capture需求不一样。

  1. 安卓:
    【微信】: 有capture,调相机; 无capture,相册相机一起调
    【QQ】: 有captrue,相册相机一起调; 无capture,调相册
    【浏览器】:有capture,调相机; 无capture,相册相机一起调

  2. 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('发布失败!');
                }
            }
        })
    }
}

请多指教,共同进步哟~

上一篇 下一篇

猜你喜欢

热点阅读