H5在ios或者android移动端上传图片,包括拍照和相册上传并压缩
因为移动端分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[
·
因为移动端分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('失败')
}
});
}
}
更多推荐
已为社区贡献2条内容
所有评论(0)