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

时间：2024-02-23 18:41:17

简单介绍

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

相关文章