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

2024-07-06 15:24| 来源: 网络整理| 查看: 265

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

第一个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，备注：前端；大家一起交流

【本文地址】

公司简介

联系我们