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