【JS】input上传文件相关尺寸限制，类型限制等

文件的类型，常见的有：

• 图片：PNG,JPG等
• 文件：EXCEL,WORD,PDF
• 多媒体： 音频，视频

Input上传文件

var inputElement = document.getElementById('fileItem');
var file = inputElement .files[0];
//通常在change事件中处理对应的文件
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
  const fileList = this.files; /* now you can work with the file list */
}

所有type属性(attribute)为file的 元素都有一个files属性(property),用来存储用户所选择的文件
FileList

这个files属性，是FileList数据类型，而FileList数据类型的每个元素就是File类型
File

• accept属性-限制上传文件类型
  如果该元素的 type 属性的值是file,则该属性表明了服务器端可接受的文件类型；否则它将被忽略。该属性的值必须为一个逗号分割的列表,包含了多个唯一的内容类型声明。
  MDN-Input

显示 .xls, .xlsx, .csv 文件...
  

只显示  Excel (.xlsx) 文件...
  

只显示 Excel (.xls) 文件...
  

只显示图片.
  

只显示文本文件...
  

只显示html文件.
  

只显示 video 文件..
  

只显示 audio 文件...
  

只显示 .WAV 文件...
  

只显示 .PDF 文件...
  

• Input文件大小限制

function verificationFileSize(file) {
    var fileSize = 0;
    var fileMaxSize = 1024;//1M
    var filePath = file.value;
    if(filePath){
        fileSize =file.files[0].size;
        var size = fileSize / 1024;
        if (size > fileMaxSize) {
            alert("文件大小不能大于1M！");
            file.value = "";
            return false;
        }else if (size <= 0) {
            alert("文件大小不能为0M！");
            file.value = "";
            return false;
        }
    }else{
        return false;
    }
}

• Input图片尺寸限制

//图片尺寸验证
function verificationPicFile(file) {
  var filePath = file.value;
  if(filePath){
      //读取图片数据
        var filePic = file.files[0];
        var reader = new FileReader();
        reader.onload = function (e) {
            var data = e.target.result;
            //加载图片获取图片真实宽度和高度
            var image = new Image();
            image.src= data;
            image.onload=function(){
                var width = image.width;
                var height = image.height;
                if (width == 720 | height == 1280){
                    alert("文件尺寸符合！");
                }else {
                    alert("文件尺寸应为：720*1280！");
                    file.value = "";
                    return false;
                }
            };
        };
        reader.readAsDataURL(filePic);
    }else{
        return false;
    }
}

js实现上传图片类型+大小+尺寸验证

Input上传文件的注意事项

• 问题描述：Input上传文件时，同样的文件上传第二次不会触发onchange回调
• 解决方案：onchange监听的为input的value值，只有再内容发生改变的时候去触发，而value在上传文件的时候保存的是文件的内容，你只需要在上传成功的回调里面，将当前input的value值置空即可。event.target.value=”;
  input 上传第二次不能选择同一文件

隐藏input默认样式

• 用其他元素调用input的click事件

Select some files

const fileSelect = document.getElementById("fileSelect"),
  fileElem = document.getElementById("fileElem");

fileSelect.addEventListener("click", function (e) {
  if (fileElem) {
    fileElem.click();
  }
}, false);

• 使用 label 元素来触发一个隐藏的 file input 元素

允许在不使用 JavaScript（click() 方法）来打开文件选择器，可以使用 元素。注意在这种情况下，input 元素不能使用 display: none（或 visibility: hidden）隐藏，否则 label 将无法通过键盘访问。使用 visually-hidden technique 作为替代。

How-to: Hide content

Select some files

.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

/* Separate rule for compatibility, :focus-within is required on modern Firefox and Chrome */
input.visually-hidden:focus + label {
  outline: thin dotted;
}
input.visually-hidden:focus-within + label {
  outline: thin dotted;
}

通过 click() 方法使用隐藏的 file input 元素