HTML5中的input type为file控件限制上传文件类型及扩展 搞清Image加载事件(onload)、加载状态(complete)后,实现图片的本地预览,并自适应于父元素内(完成)

简单介绍

input file控件限制上传文件类型如下:
1.文件类型中间用,分开;
2.html和htm这样的要写成两个;

3实例:

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

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

  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:

="image/*;capture=camera">
="video/*;capture=camcorder"="audio/*;capture=microphone">

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

扩展

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

实现代码如下:

html代码:

 id="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);
            } 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',(e){
     var url = getObjectURL(e.target)[0];
     video_element.src = url;
},false);

当然这儿也可以用FileReader.readAsDataURL读取指定Blob或File的内容。

(e){
    var reader = new FileReader();
    reader.onload = (evt) => {
          video_element.src = evt.target.result;
    };
    reader.readAsDataURL(e.target.files[0]);
},1)">false);

可参考这篇文章:《搞清Image加载事件(onload)、加载状态(complete)后,实现图片的本地预览,并自适应于父元素内(完成)

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

最近突然想起,怎样用摄像头拍照实现,搜了一下,发现网上基本都是这样的文章,地址:https://www.cnblogs.com/xueyuwyz/p/6187117.html。

基本代码都这样:

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方法。(待后面验证更新)

相关文章

HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码