H5 端上传图片.md

<input type="file" id="imgBtn" multiple ref="frontFile" accept="image/*" capture="camera"
@change="fileChange" />

移动端上传多张图片调用照相机和图库,安卓和 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 )//就是图片路径
    }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容