移动端实现拍照、相册选择功能

移动端实现拍照、相册选择功能

<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位头部