H5 移动端相册拍照 录音 录像,然后上传后台
<input type="file" id="imagesel" accept="image/*" capture="camera" onchange="upload(this)" style="display:none"> <input type="file" id="videosel" accept="video/*" capture="camcorder" onchange="upload(this)" style="display:none"> <input type="file" id="audiosel" accept="audio/*" capture="microphone" onchange="upload(this)" style="display:none"> <div onclick="add_img()" style="position: relative;width:32%;height:100%;top:25%;text-align: center;line-height:center"> <div class="geticonfont"></div> <div class="titlename1">拍照</div> </div> <div onclick="add_video()" style="position: relative;width:32%;height:100%;top:25%;text-align: center;line-height:center"> <div class="geticonfont"></div> <div class="titlename1">录像</div> </div> <div onclick="add_audio()" style="position: relative;width:26%;height:100%;top:25%;text-align: center;line-height:center"> <div class="geticonfont"></div> <div class="titlename1">录音</div> </div>
阿里小图标引用需自行下载
function add_img() {
document.getElementById("imagesel").click();
console.log("调用相机");
}
function add_video() {
document.getElementById("videosel").click();
console.log("调用摄像机");
}
function add_audio() {
document.getElementById("audiosel").click();
console.log("调用录音");
}
文件上传:
//图片上传 function upload(file) { var formData = new FormData(); formData.append("file", file.files[0]); var u = window.localStorage.getItem("pocurl") + "/materials/pocEvent/upload"; console.log("U:" + u); // alert(formData); // alert(file); $ .ajax({ url : u, type : 'POST', data : formData, processData : false,// 告诉jQuery不要去处理发送的数据 contentType : false,// 告诉jQuery不要去设置Content-Type请求头 beforeSend : function() { }, complete : function() { }, success : function(res) { } }); }
该文章个别参数没有详细说明,如果不清楚请参考上篇博客,上篇博客参数介绍十分详细:https://www.cnblogs.com/ttqi/p/14034229.html