上传图片兼容ios和安卓

来源：互联网发布：c语言成绩查询系统编辑：程序博客网时间：2024/04/28 10:37

/*图片上传*/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("请选择图片");
}
}

阅读全文

0 0