手机端web页面调用相机和相册及文件上传

最近在写做一个手机端web的项目，其中有涉及到用户头像修改！由于本人前端小白一个，刚开始觉得挺棘手的。不过经过瞎倒腾终于给弄完了，在此记录一下，以备以后需要！

<input type="file" accept="image/*" capture="camera">
<input type="file" accept="image/*" >

第一个input 可以直接调用手机的相机，capture表示的是系统所捕获的默认设备，camera：照相机；camcorder：摄像机；microphone：录音;

第二个input 调用的是相册或者相机，这个因浏览器不同而表现不同。可以试试

当我们用input 选择完图片后我们就可以在这上面看到我们选择图片的名称了，接下来就剩下如何传送给后台文件了！这里我们用到FormData技术

// 实例化一个空对象
var data = new FormData();
//获取file文件
var file=document.getElementById(yourInputId).files[0];
//将文件加入到data中，一般FormData对象中添加数据使用append()方法
data.append(file)
// 创建一个HTTP请求
var request = new XMLHttpRequest();
// 然后使用open方法，选择传送的method和后台的URL
request.open("POST|GET", "URL");
// 最后，向后台发送我们的数据
request.send(data)

当然我们也可以使用jQuery

// 获取要传输的文件------假设只有一个文件
var file = document.getElementById(yourInputId).files[0];
// ajax传输
$.ajax({
url: URL,
type: "POST",
async: false,
cache: false,
processData: false,// 告诉jQuery不要去处理发送的数据
contentType: false,// 告诉jQuery不要去设置Content-Type请求头
data: file,
success: function(data){
alert(data);
},
error: function(err) {
alert(err);
}
});

好了，其实也不是很难，希望对你有帮助！

欢迎加入前端交流群496522155，备注：前端；

大家一起交流