html5 input上传音乐文件,HTML5中的input type为file控件限制上传文件类型及扩展

简单介绍

input file控件限制上传文件类型如下：

1.文件类型中间用，分开；

2.html和htm这样的要写成两个；

3实例：

如果想在手机上实现拍照上传，添加如下代码：

重要的就是这句话：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:

扩展

1.通过file上传的视频在本地进行预览

实现代码如下：

html代码：

JS代码：

/**

* 建立一个预览图片的url blob对象

* @param {object} fileObj文件域Dom对象

* @return {Array} urlArray图片url数组*/

var getObjectURL = function(fileObj) {var url = null;varfile;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);

}

}returnurlArray;

};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 = newFileReader();

reader.οnlοad= (evt) =>{

video_element.src=evt.target.result;

};

reader.readAsDataURL(e.target.files[0]);

},false);

2.如何使用HTML5实现利用摄像头拍照上传功能

基本代码都这样：

var video_element=document.getElementById('video');if(navigator.getUserMedia){ //opera应使用opera.getUserMedianow

navigator.getUserMedia('video',success,error); //success是回调函数,当然你也可以直接在此写一个匿名函数

}functionsuccess(stream){

video_element.src=stream;

}functionerror(e){

alert(e);

}

最主要的都是navigator.getUserMedia，但打印navigator没有getUserMedia方法。(待后面验证更新)