简单介绍
input file控件限制上传文件类型如下:
1.文件类型中间用,分开;
2.html和htm这样的要写成两个;
3实例:
@H_502_9@
如果想在手机上实现拍照上传,添加如下代码:
@H_502_9@ capture="camera"="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:
@H_502_9@="image/*;capture=camera">
="video/*;capture=camcorder"="audio/*;capture=microphone">
扩展
1.通过file上传的视频在本地进行预览
实现代码如下:
@H_502_9@id="video/*;capture=camcorder" />
videoid="video"style="width:100%;height:200px;"controls="true">
JS代码:
@H_502_9@/**
* 建立一个预览图片的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);
}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',(e){var url = getObjectURL(e.target)[0];
video_element.src=url;
},false);
当然这儿也可以用FileReader.readAsDataURL读取指定Blob或File的内容。
@H_502_9@(e){var reader = newFileReader();
reader.οnlοad= (evt) =>{
video_element.src=evt.target.result;
};
reader.readAsDataURL(e.target.files[0]);
},1)">false);
2.如何使用HTML5实现利用摄像头拍照上传功能
基本代码都这样:
@H_502_9@if(navigator.getUserMedia){ opera应使用opera.getUserMedianow
navigator.getUserMedia('video',success,error); success是回调函数,当然你也可以直接在此写一个匿名函数
}success(stream){
video_element.src=stream;
}error(e){
alert(e);
}
最主要的都是navigator.getUserMedia,但打印navigator没有getUserMedia方法。(待后面验证更新)
总结
如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
小编个人微信号 jb51ccc
喜欢与人分享编程技术与工作经验,欢迎加入编程之家官方交流群!