HTML5中的input type為file控件限制上傳文件類型及擴展

簡單介紹

input file控件限制上傳文件類型如下：
1.文件類型中間用，分開；
2.html和htm這樣的要寫成兩個；

3實例：

<input type="file"  name="filePath" accept=".jpg,.jpeg,.doc,.docx,.xls,.xlsx,.pdf">

 如果想在手機上實現拍照上傳，添加如下代碼：

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

重要的就是這句話：capture="camera" accept="image/*"

下面精簡代碼（備注），On mobile devices, including Mobile: Android 3+, Chrome 16+, Safari 6+, Firefox 10+, Blackberry 10+, while not part of the specifications, the camera and microphone can be accessed:

<input type="file" accept="image/*;capture=camera">
<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">

地址：https://www.wufoo.com/html5/attributes/20-accept.html

擴展

1.通過file上傳的視頻在本地進行預覽

實現代碼如下：

html代碼：

<input type="file" id="file" accept="video/*;capture=camcorder" />
<video id="video" style="width:100%;height:200px;" controls="true"></video>

JS代碼：

/**
 * 建立一個預覽圖片的url blob對象
 * @param {object} fileObj文件域Dom對象
 * @return {Array} urlArray圖片url數組
 */
var getObjectURL = function(fileObj) {
    var url = null;
    var file;
    var urlArray = [];
    if (fileObj.files) {
        for(var num = 0, j = fileObj.files.length; num < j; num ++){
            file = fileObj.files[num];
            if (window.createObjectURL != undefined) { // basic
                url = window.createObjectURL(file);
            } else if (window.URL != undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file);
            } else if (window.webkitURL != undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file);
            }
           urlArray.push(url); 
        } 
    }
    return urlArray;
};

var fileEle = document.getElementById('file');
var video_element=document.getElementById('video');

fileEle.addEventListener('change',function(e){
     var url = getObjectURL(e.target)[0];
     video_element.src = url;
},false);

當然這兒也可以用FileReader.readAsDataURL讀取指定Blob或File的內容。

var fileEle = document.getElementById('file');
var video_element=document.getElementById('video');

fileEle.addEventListener('change',function(e){
    var reader = new FileReader();
    reader.onload = (evt) => {
          video_element.src = evt.target.result;
    };
    reader.readAsDataURL(e.target.files[0]);
},false);

可參考這篇文章：《搞清Image加載事件(onload)、加載狀態(complete)后，實現圖片的本地預覽，並自適應於父元素內(完成)》

2.如何使用HTML5實現利用攝像頭拍照上傳功能

最近突然想起，怎樣用攝像頭拍照實現，搜了一下，發現網上基本都是這樣的文章，地址：https://www.cnblogs.com/xueyuwyz/p/6187117.html。

基本代碼都這樣：

var video_element=document.getElementById('video');
if(navigator.getUserMedia){ // opera應使用opera.getUserMedianow
     navigator.getUserMedia('video',success,error);  //success是回調函數,當然你也可以直接在此寫一個匿名函數
}
function success(stream){
    video_element.src=stream;
}
function error(e){
    alert(e);
}

最主要的都是navigator.getUserMedia，但打印navigator沒有getUserMedia方法。（待后面驗證更新）