文件的类型，常见的有：
- 图片：PNG,JPG等
- 文件：EXCEL,WORD,PDF
- 多媒体： 音频，视频
Input上传文件
<input id="fileItem" type="file">
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的 <input> 元素都有一个files属性(property),用来存储用户所选择的文件
FileList
这个files属性，是FileList数据类型，而FileList数据类型的每个元素就是File类型
File
- accept属性-限制上传文件类型
如果该元素的 type 属性的值是file,则该属性表明了服务器端可接受的文件类型；否则它将被忽略。该属性的值必须为一个逗号分割的列表,包含了多个唯一的内容类型声明。
MDN-Input
<p>显示 .xls, .xlsx, .csv 文件...</p>
<input type="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" ID="fileSelect" runat="server" />
<p>只显示 Excel (.xlsx) 文件...</p>
<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ID="fileSelect" runat="server" />
<p>只显示 Excel (.xls) 文件...</p>
<input type="file" accept="application/vnd.ms-excel" ID="fileSelect" runat="server" />
<p>只显示图片.</p>
<input type="file" accept="image/*" ID="fileSelect" runat="server" />
<p>只显示文本文件...</p>
<input type="file" accept="text/plain" ID="fileSelect" runat="server" />
<p>只显示html文件.</p>
<input type="file" accept="text/html" ID="fileSelect" runat="server" />
<p>只显示 video 文件..</p>
<input type="file" accept="video/*" ID="fileSelect" runat="server" />
<p>只显示 audio 文件...</p>
<input type="file" accept="audio/*" ID="fileSelect" runat="server" />
<p>只显示 .WAV 文件...</p>
<input type="file" accept=".wav" ID="fileSelect" runat="server" />
<p>只显示 .PDF 文件...</p>
<input type="file" accept=".pdf" ID="fileSelect" runat="server" />
- 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;
}
}
Input上传文件的注意事项
- 问题描述：Input上传文件时，同样的文件上传第二次不会触发onchange回调
-
解决方案：onchange监听的为input的value值，只有再内容发生改变的时候去触发，而value在上传文件的时候保存的是文件的内容，你只需要在上传成功的回调里面，将当前input的value值置空即可。event.target.value=”;
input 上传第二次不能选择同一文件
隐藏input默认样式
- 用其他元素调用input的click事件
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
<button id="fileSelect">Select some files</button>
const fileSelect = document.getElementById("fileSelect"),
fileElem = document.getElementById("fileElem");
fileSelect.addEventListener("click", function (e) {
if (fileElem) {
fileElem.click();
}
}, false);
- 使用 label 元素来触发一个隐藏的 file input 元素
允许在不使用 JavaScript（click() 方法）来打开文件选择器，可以使用 <label> 元素。注意在这种情况下，input 元素不能使用 display: none（或 visibility: hidden）隐藏，否则 label 将无法通过键盘访问。使用 visually-hidden technique 作为替代。
<input type="file" id="fileElem" multiple accept="image/*" class="visually-hidden">
<label for="fileElem">Select some files</label>
.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;
}
