因为移动端分ios和android。

var u = navigator.userAgent, app = navigator.appVersion;

//android终端或者uc浏览器

var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; 

//ios终端

var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);

ios:

<a href="javascript:;" class="file" style="cursor :pointer; border: none; height: 104px;">
	<input id="pictureC_file" type="file" name="pictureA_file" style="opacity: 0;"/>
</a>

去掉了multiple属性,因为这个属性是多选的意思,点开相册可以选择多张图片但是只能上传最后一张

//.off()保证只能执行一次,避免多次调chang事件
$('.pictureA_file').off("change").change(function (e) {
//iosSend((该节点),(该节点在父节点的索引)); 
			iosSend(cc,index);
//清空数值,保证$('.pictureA_file')可以多次执行
            e.target.value = null;
})

function iosSend(cc,index) {
//ios认多个class成【len】【0】的格式,需要自己去选择判断len
    var file = $('.pictureA_file')[len].files[0];
    fileName = file.name
    var fileReader = new FileReader(); 
//转成base64的格式
    fileReader.readAsDataURL(file);
    fileReader.onloadend = function () {
//fileReader.result是base64格式的本地选择的图片
        compress(file,cc,index,fileReader.result);
    }; 
}

android:
在安卓有这个问题,只能够点击弹出个框选择相机或者相册:

<div class="options" id="options">
            <a href="javascript:;" class="file" style="cursor :pointer;">拍照
                <input class="pictureB_file" accept="image/*" type="file" capture="camera" name="pictureA_file" style="opacity: 0;"/>
            </a> 
            <a href="javascript:;" class="file" style="cursor :pointer;">相册
                <input class="pictureC_file" type="file" name="pictureA_file" style="opacity: 0;"/>
            </a> 
</div>
//$('.pictureB_file')拍照,方法paizhao(cc,index);
//$('.pictureC_file')拍照,方法xiangce(cc,index);
$('(不同功能选择不同class)').off("change").change(function (e) {
//iosSend((该节点),(该节点在父节点的索引)); 
			paizhao(cc,index); || xiangce(cc,index)
//清空数值,保证$('.pictureA_file')可以多次执行
            e.target.value = null;
})
function paizhao(bb,index) {
    var file = fileTagB[0].files[0];
    fileName = file.name
    var fileReader = new FileReader();
    fileReader.readAsDataURL(file);
    fileReader.onloadend = function () {
        compress(file,bb,index,fileReader.result)
    };    
}
function xiangce(cc,index) {
    var file = fileTagC[0].files[0];
    fileName = file.name
    var fileReader = new FileReader();
    fileReader.readAsDataURL(file);
    fileReader.onloadend = function () {
        compress(file,cc,index,fileReader.result);
    };   
}


function compress(file,ele,index,result) {
    if (file.type != 'image/jpeg' && file.type != 'image/png' && file.type != 'image/jpg') {
        layer.open({
            content: '上传格式错误'
            ,btn: '确定'
        });
        return;
    } else {
    //压缩图片
        let img = new Image();
        //必须有原图的路径,能够展示并找到的不同的
        img.src = result;
        //执行顺序不同, img.addEventListener('load',function(){})保证了先执行完img才能执行load,不然img.onload方法失效
        img.addEventListener('load',function() {
	        let canvas = document.createElement('canvas')
	        let context = canvas.getContext('2d')
	        //  file.size/1024才是KB
	        const fileSizeMB = file.size / (1024 * 1024)
	        if (fileSizeMB > 10) {
	            layer.open({
	                content: '文件过大,请重新上传'
	                ,btn: '确定'
	                });
	        } else if(fileSizeMB < 3) {
	            upload(file,ele,index);
	        }else {
	            let targetW = canvas.width = this.width * 1
	            let targetH = canvas.height = this.height * 1
	            //清空canvas
	            context.clearRect(0, 0, targetW, targetH)
	            context.drawImage(img, 0, 0, targetW, targetH)
	            //压缩成0.3 ,data是压缩后得到的base64的file
	            data = canvas.toDataURL('image/jpeg',0.3);
	            //base64转成file
	            const blob1 = dataURLtoFile(data,fileName);
	            upload(blob1,ele,index);
	            img.src = '';
	        }
	    },false);
    }
}
function dataURLtoFile(dataurl, filename) {//将base64转换为文件
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, {type:mime});
}
function upload(file,cc,index) {
    if (file) {
    //图片上传必须用formData格式
        var formData = new FormData()
            formData.append("file", file);
            var layer1 = layer.open({
                shadeClose: false,
                type: 2,
                content: '加载中'
            });
            $.ajax({
                url:''
                dataType: "json",   //返回格式为json
                contentType: 'application/json',
                async: true,//请求是否异步,默认为异步,这也是ajax重要特性
                data: formData,    //参数值
                contentType: false,
                processData: false,
                type: "POST",   //请求方式
                beforeSend: function(){
                    
                },
                success: function(req){
                    layer.close(layer1);
                   console.log('成功')
                    } else {
                        layer.open({
                        content: req.message
                        ,btn: '确定'
                        });
                    }
                },
                complete: function(){
                    //请求完成的处理
                    
                },
                error: function(err){
                    layer.close(layer1);
                    //请求出错处理
                    var layern = layer.open({
                        shadeClose: false,
                        content: err,
                        btn: '确定',
                    });
                    console.log('失败')
                }
            });
    }
}
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐