H5 端上传图片.md


移动端上传多张图片调用照相机和图库,安卓和 ios显示会不同。

//获取浏览器的userAgent,并转化为小写
var ua = navigator.userAgent.toLowerCase();
//判断是否是苹果手机,是则是true
var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);

// var isWeixin = ua.match(/MicroMessenger/i)=="micromessenger";//微信判断
// var isQQInstalled = ua.indexOf(' qq')>-1 && ua.indexOf('mqqbrowser') < 0;//qq内置浏览器
var isQQ = ua.indexOf('mqqbrowser') > -1 && ua.indexOf(" qq") < 0;//qq浏览器

if (isQQ || isIos) {
    var files = document.getElementById("imgBtn");
    files.removeAttribute("capture")
}

如果传入的多张图片需要预览显示出来

//处理图片并添加都dom中的函数
var readFile = function (obj) {
    // 获取input里面的文件组
    var fileList = obj.files;
    //对文件组进行遍历,可以到控制台打印出fileList去看看
    var indent = "";
    for (var i = 0; i < fileList.length; i++) {
        var reader = new FileReader();
        reader.readAsDataURL(fileList[i]);
        imgList.push({ name: fileList[i] })
        // 当文件读取成功时执行的函数
        reader.onload = function (e) {
            console.log(this.result )//就是图片路径
    }
}

你可能感兴趣的:(H5 端上传图片.md)