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

简单介绍

扩展

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

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

猜你在找的HTML5相关文章

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