image.png

點擊“照片/視頻”不觸發(fā)相冊或相機，一點反應都沒有，但是在瀏覽器上調試沒有一點問題。為什么呢？
后來看到一篇https://juejin.im/post/5c131793e51d4517bf65405c
發(fā)現(xiàn)需要判斷是安卓還是ios對input控件的capture需求不一樣。

1. 安卓：
   【微信】： 有capture，調相機； 無capture，相冊相機一起調
   【QQ】： 有captrue，相冊相機一起調； 無capture，調相冊
   【瀏覽器】：有capture，調相機； 無capture，相冊相機一起調

2. IOS :
   【微信】： 有capture，調相機； 無capture，相冊相機一起調
   【QQ】： 有capture，調相機； 無capture，相冊相機一起調
   【瀏覽器】：有capture，調相機； 無capture，相冊相機一起調

結論：IOS表現(xiàn)行為一致，只要不加capture就可正常使用。安卓上需要設置capture屬性
好啦??！上代碼吧還是

html+mui

<div class="container">
      <!-- 頂部導航欄 -->
      <header>
          <span onclick="jumpBack()">
              <img src="./imgs/back.png" alt="back"> 
          </span> 
          <span>發(fā)布論壇</span>
      </header>
      <!-- 發(fā)布論壇--內(nèi)容 -->
      <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>
      <!-- 發(fā)布 -->
      <div class="btn">
          <button id="forum" onclick="submit()">發(fā)布</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);
    };
}

// 發(fā)布論壇-- 提交
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('發(fā)布成功！');
                    jumpBack();     // 返回朋友圈列表
                } else if (res.status == 0) {
                    mui.toast('發(fā)布失敗！');
                }
            }
        })
    }
}

請多指教，共同進步喲~