手机端web页面调用相机和相册及文件上传 |
您所在的位置：网站首页 › 网站上传文件老是跳到相机页面 › 手机端web页面调用相机和相册及文件上传 |
|
最近在写做一个手机端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，备注：前端； 大家一起交流 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |