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

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

作者: 小小_128 | 来源:发表于2020-01-07 16:21 被阅读0次
    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('发布失败!');
                    }
                }
            })
        }
    }
    

    请多指教,共同进步哟~

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/qdoractx.html