您的位置:首页 > 移动开发 > IOS开发

上传图片兼容ios和安卓

2017-06-02 17:10 423 查看
/*图片上传*/
function FileReder_getphotos(input, id) {
if(typeof FileReader === 'undefined') {
mui.toast("抱歉,您的浏览器不支持FileReader")
} else {
readFile(input, id);
}

function readFile(input, id) {
var imgName = input.files[0].name; // 图片完整名
var imgType = judgeImg(imgName);
if(imgType !== 'jpg' && imgType !== 'png') {
mui.toast('请选择合法的图片');
return false;
}
var baseType = input.files[0].type;
$(id).attr('imgType', imgType);
var file = input.files[0];
if(!/image\/\w+/.test(file.type)) {
mui.toast("请确保文件为图像类型");
return false;
}
var reader = new FileReader();
/**
* readAsDataURL方法会使用base-64进行编码,编码的资料由data字串开始,后面跟随的是MIME type,然后再加上base64字串,逗号之后就是编码过的图像文件的内容。
*/
reader.readAsDataURL(file); //开始读取指定的Blob对象或File对象中的内容
//读取成功后调用
reader.onload = function(e) {
// console.log(e.target.result);//获取File的url
// mui.toast(e.target.result);
var imgPath = e.target.result; // base64
$(id).find('span').css('background-image','url('+imgPath+')');
picBase = imgPath.substring(imgPath.indexOf(',') + 1, imgPath.length);
//
};
// 读取失败时调用
reader.onerror = function(e) {
console.log(JSON.stringify(e) + "出错");
}
}

function judgeImg(path) {
var regs = [/\.(gif|GIF)$/, /\.(jpg|JPG)$/, /\.(jpeg|JPEG)$/, /\.(png|PNG)$/];
var type = ['gif', 'jpg', 'jpeg', 'png'];
for(var i in regs) {
if(regs[i].test(path)) {
return type[i];
}
}
}
}

上面是js.下面是html

<div class="home-m2">
<span>保单凭证</span>
<span id="picture">
<span></span>
</span>
<span id="commit">点击上传 </span>
<input type="file"  id="inputs" onchange="FileReder_getphotos(this,'#picture')" name="" value="" />

<!--<input type="file"  id="inputs" onchange="getPhotos(this,'#picture')" name="" value="" />-->
</div>


之前很多都兼容不能苹果,这个可以

百度一个比较好的代码,利用canves压缩图片

function  UpLoad(e) {  

    var f = e.files[0];  

    fileType = f.type;  

    if(/image\/\w+/.test(fileType)) {  

        var fileReader = new FileReader();  

        fileReader.readAsDataURL(f);  

        fileReader.onload = function(event) {  

            var result = event.target.result; //返回的dataURL   

            var image = new Image();  

            image.src = result;  

            //若图片大小大于1M,压缩后再上传,否则直接上传  

             if(f.size>1024*1024){     

                         image.onload = function() { //创建一个image对象,给canvas绘制使用  

                    var canvas = document.getElementById("canvas");     

                    canvas.width = this.width;  

                    canvas.height = this.height; //计算等比缩小后图片宽高   

                    var ctx = canvas.getContext('2d');  

                    ctx.drawImage(this, 0, 0, canvas.width, canvas.height);  

                    var newImageData = canvas.toDataURL(fileType, 0.8); //重新生成图片      

                        sendData = newImageData.replace("data:"+fileType+";base64,",'');                  

                    dataLength=decodeBase64(sendData).length;//base64位图片长度(这里没有写这个方法)                 

                    $("#imgUrl").val(sendData);  

                    $("#preViewImg").attr("src",newImageData);  

                    $("#canvas").hide();  

                }  

                 }else{  

                        image.onload = function() { //创建一个image对象,给canvas绘制使用     

                sendData = result.replace("data:"+fileType+";base64,",'');    

                dataLength=decodeBase64(sendData).length;  

                $("#preViewImg").attr("src",result);  

                $("#imgUrl").val(sendData);                   

            }  

             }  

        }  

    } else {  

        alert("请选择图片");  

    }  

}  
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: