使用ajax 图片上传之---------使用js 调用相机拍照并预览图片

场景：

今日接到一个需求，需要实现用户点击以下方块，调起相机拍照并且上传图片。主要涉及技术有 javascript，研究一番之后可以通过以下方法实现，以此记录一下。

html

<div class="getImg">
   <img src="./../img/use_img/upload.png" alt="" id="preLookImg">
   <input class="upload_input" name="img" type="file" accept="image/*" capture="camera" onchange="getImg(this)"/>
 </div>

css
将input框定位在图片的上方，全透明。

.getImg img{
    display: block;
    width: 100%; /* 高度自适应 */
}
 .getImg{
    width:100px;
    height:100px;
    position: relative;
    overflow: hidden;
}
.upload_input{
    width:100px;
    height:100px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
}

var file_name =''
//获取图片
function getImg(file) {
	let that = this
	var prevDiv = document.querySelector('#preLookImg');
	
	// * 使用IE浏览器的话此处可能获取不到 file.files；只能获取到 file.value
	if (file.files && file.files[0]) {
		var reader = new FileReader();
		reader.onload = function(evt) {
			file_name = evt.target.result
			prevDiv.setAttribute('src', evt.target.result)
	}
	reader.readAsDataURL(file.files[0]); // 读取文件 file.files[0]
}

// 上传图片
function uploadImg(e) {
    let file = file_name
    let param = new FormData()
    // 通过append向form对象添加数据
    param.append('image', file) 
    $.ajax({
        type : "POST",
        url : "upload/url",
        processData: false,  // 不希望转换传递的数据信息
        contentType: false, // 取消内容编码
        data: param,
        success : function(data){
            // 上传成功
        }
    })
}

以上就可以实现基本的上传图片功能。希望可以帮到你

使用input 调用相机拍照需要注意：

• 在 IOS 上，使用相机竖向拍摄的时候得到的图片会逆时针旋转90°，使用横向拍摄不会有问题。（解决办法推荐博客 使用利用exif.js解决ios手机上传竖拍照片旋转90度问题 即可解决）

• 在android 上使用相机拍照没有这个问题。

你可能需要：

将图片转换为 base64格式
将base64转换为文件
.