移动端实现拍照、相册选择功能
<form enctype="multipart/form-data" method="POST" style="display: flex; width: 100%;">
<div style="width: 50%; align-items: center; justify-content: center; display: flex;" onclick="jjimgUpload()" >
<div>
<input id="file" name="file" class="myjjUpload" type="file" style="position: absolute; width: 140px; height: 140px;opacity: 0; z-index: 100;" />
<img id="jjid" style="width: 140px; border: 2px dashed #999; border-radius: 10px;" src="../source/images/jj.jpg">
</div>
</div>
</form>
function jjimgUpload() {
$(".myjjUpload").change(function(){
var imgFile = this.files[0];
//后缀选取
if (!/\/(?:jpeg|jpg|png)/i.test(imgFile.type)){
mui.alert('图片格式不支持');
return;
}
// 图片后缀名
var type = imgFile.name;
var index = type.lastIndexOf('.');
var suffixName = type.substring(index + 1);
//异步读取文件
var reader = new FileReader();
// 调用reader.readAsDataURL()方法,把图片转成base64
reader.readAsDataURL(imgFile);
reader.onload = function(evt) {
var imgBase64Data = evt.target.result;
$("#jjid").attr('src', imgBase64Data);
$("#jjid").attr('style', "width: 140px; height:140px; border: 2px dashed #999; border-radius: 10px;");
// base64截取
var head = imgBase64Data.indexOf("4") + 2;
var base64Data = imgBase64Data.substring(head, imgBase64Data.length - head);
// 上传数据格式
var formdata=new FormData();
formdata.append('fileBase64',base64Data);
formdata.append('suffix', suffixName);
formdata.append('module', 'cg')
$.ajax({
url: "http://XXX/upload/fileUploadBase64",
contentType: false,
processData: false,// 不处理数据
type: 'POST',
data: formdata,
dataType: 'json',
success: function (data) {
var result = data.data;
if (data.errCode == '0000') {
//数据返回
} else {
mui.alert(data.errInfo)
}
}
});
}
});
}
Android端:
accept=“image/*” capture=“camera” 只调用相机
accept=“image/*” 调用相机 图片或者相册 (不添加capture="camera"属性则两个都选择)
IOS端:
加入capture参数则只能调用相机
base64去头方式
var dataImg = ''; //base64
var imgs = dataImg.replace(/^data:image\/\w+;base64,/, "");//去掉base64位头部