寫在前面：
這裏先來介紹下input:file的幾個屬性：
accept：規定通過文件上傳來提交的文件的類型。
capture：該屬性用於調用設備的攝像頭或麥克風。
multiple：可勾選多文件，調用系統攝像頭或者錄音機都只是單文件。
一、常規上傳demo（選取本地的圖片/視頻文件進行上傳）
移動端查看 演示案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>圖片/視頻上傳&&預覽</title>
<style>
*{
margin:0;
padding:0;
}
html{
font-size: 10px;
}
ul,ol{
list-style-type:none;
}
.clearfix:after,.clearfix:before{
display:table;
content:' ';
}
.clearfix:after{
clear:both
}
.tc{
text-align:center;
line-height: 3.5rem;
font-size: 2rem;
color: #71777D;
}
.select,.select_video{
height:3rem;
line-height:3rem;
border:1px solid #f20d0d;
margin:0.5rem 1rem;
position:relative;
background: rgba(242,13,13,.06);
color: #f20d0d;
}
.select label,.select_video label{
width:100%;
position:absolute;
top:0;
left:0;
font-size:14px;
color:#333;
font-size: 1.6rem;
}
#upload,#upload_video{
display:none;
}
.preview,.video_preview{
margin:0.5rem 1rem;
border:1px solid #f1f1f1;
padding:4px;
min-height: 7.5rem;
display:none;
}
.video_preview video{
width:100%;
height:16rem;
object-fit:fill;
}
.preview_img_list li{
float:left;
width:25%;
padding:2px 0;
}
.preview_img_list li img{
vertical-align:top;
max-width:98%;
}
.btn{
background: #f20d0d;
color:#fff;
height:3rem;
font-size: 1.7rem;
line-height:3rem;
margin:2rem 1rem;
border-radius:0.5rem;
box-shadow: 0 8px 16px 0 rgba(242,13,13,.2);
}
</style>
</head>
<body>
<h2 class="tc">圖片上傳及預覽</h2>
<form action="">
<div class="select tc">
<label for="upload">圖片上傳及預覽</label>
<input type="file" id="upload" accept="image/*">
</div>
<div class="preview">
<ul class="preview_img_list clearfix">
</ul>
</div>
<div class="select_video tc">
<label for="upload_video">視頻上傳及預覽</label>
<input type="file" id="upload_video" accept="video/*">
</div>
<div class="video_preview">
</div>
<div class="submit btn tc">上傳</div>
</form>
</body>
<script>
window.onload = function() {
var uploadBtn = document.querySelector('#upload');
var previewImgList = document.querySelector('.preview_img_list');
var uploadVideo = document.querySelector('#upload_video');
var submitBtn = document.querySelector('.submit');
imgArr = new Array();
uploadBtn.addEventListener('change', function() {
var imgLen = this.files.length;
var liLen = previewImgList.getElementsByTagName('li').length;
var ImgLen = imgLen + liLen;
if (ImgLen > 8) {
alert("上傳最大數量不能大於8");
return false;
}
document.querySelector(".preview").style.display = 'block';
for (var i = 0; i < imgLen; i++) {
var file = this.files[i];
var imgType = /^image\//;
if (!imgType.test(file.type)) {
continue;
}
var li = document.createElement('li');
var img = document.createElement("img");
li.appendChild(img);
previewImgList.appendChild(li);
var reader = new FileReader();
reader.onload = (function(aImg) {
return function(e) {
aImg.src = e.target.result;
initHW();
imgArr.push(e.target.result);
};
})(img);
reader.readAsDataURL(file);
}
}, false);
uploadVideo.addEventListener('change', function() {
var file = this.files[0];
var videoType = /^video\//;
if (!videoType.test(file.type)) {
alert("所選文件不是合法的視頻文件");
return false;
}
var pv = document.querySelector('.video_preview');
var video = document.createElement('video');
video.setAttribute('controls', 'controls');
video.style.width = "100%";
pv.appendChild(video);
pv.style.display = "block";
var reader = new FileReader();
reader.onload = (function(aImg) {
return function(e) {
aImg.src = e.target.result;
};
})(video);
reader.readAsDataURL(file);
video.play();
}, false);
submitBtn.addEventListener('click', function() {
if (!imgArr.length) {
alert('請選擇要上傳的圖片');
return false;
}
var form = document.querySelector('form');
var fd = new FormData(form);
for (var i = 0; i < imgArr.length; i++) {
fd.append('file[]', imgArr[i]);
}
// 這裏寫上傳服務器,fd爲上傳參數
}, false);
}
function initHW() {
var previewImgList = document.querySelector('.preview_img_list');
var Lis = previewImgList.getElementsByTagName('li');
var LisLen = Lis.length;
if (LisLen > 1) {
var img = Lis[0].getElementsByTagName('img')[0];
var imgW = img.width;
var imgH = img.height;
for (var i = 1; i < LisLen; i++) {
var img = Lis[i].getElementsByTagName('img')[0];
img.style.width = imgW + 'px';
img.style.height = imgH + 'px';
}
}
}
</script>
</html>
二、調攝像頭拍照/錄像上傳
這裏就要使用到input:file, 指定capture屬性調用默認相機，攝像，錄音功能。
當accept=”audio/或video/”時capture只有兩種值，一種是user，用於調用面向人臉的攝像頭(例如手機前置攝像頭)，一種是environment，用於調用環境攝像頭(例如手機後置攝像頭)。官方文檔
capture的值網上流傳的比如：camera–照相機；camcorder–攝像機；microphone–錄音；filesystem–文件系統，這些這裏統稱爲‘其他值’。
對capture各種取值，以及是否有multiple屬性探究可以使用移動端查看 演示案例
使用總結：
iOS最遵守遵守HTML5規範，其次是X5內核，安卓的webview基本忽略了capture。
理想情況下應該按照如下開發webview：
- 當accept=”image/*”時，capture=”user”調用前置照相機，capture=”其他值”，調用後置照相機
- 當accept=”video/*”時，capture=”user”調用前置錄像機，capture=”其他值”，調用後置錄像機
- 當accept=”image/,video/”，capture=”user”調用前置攝像頭，capture=”其他值”，調用後置攝像頭，默認照相，可切換錄像
- 當accept=”audio/*”時，capture=”放空或者任意值”，調用錄音機
- 當input沒有capture時，根據accppt類型給出文件夾選項以及攝像頭或者錄音機選項
- input含有multiple時訪問文件夾可勾選多文件，調用系統攝像頭或者錄音機都只是單文件
- 無multiple時都只能單文件