文件的類型泥栖，常見的有：
- 圖片：PNG,JPG等
- 文件：EXCEL,WORD,PDF
- 多媒體： 音頻峭拘，視頻
Input上傳文件
<input id="fileItem" type="file">
var inputElement = document.getElementById('fileItem');
var file = inputElement .files[0];
//通常在change事件中處理對應(yīng)的文件
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
const fileList = this.files; /* now you can work with the file list */
}
所有type屬性(attribute)為file的 <input> 元素都有一個(gè)files屬性(property),用來存儲(chǔ)用戶所選擇的文件
FileList
這個(gè)files屬性，是FileList數(shù)據(jù)類型咬扇，而FileList數(shù)據(jù)類型的每個(gè)元素就是File類型
File
- accept屬性-限制上傳文件類型
如果該元素的 type 屬性的值是file,則該屬性表明了服務(wù)器端可接受的文件類型甲葬；否則它將被忽略。該屬性的值必須為一個(gè)逗號(hào)分割的列表,包含了多個(gè)唯一的內(nèi)容類型聲明懈贺。
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圖片尺寸限制
//圖片尺寸驗(yàn)證
function verificationPicFile(file) {
var filePath = file.value;
if(filePath){
//讀取圖片數(shù)據(jù)
var filePic = file.files[0];
var reader = new FileReader();
reader.onload = function (e) {
var data = e.target.result;
//加載圖片獲取圖片真實(shí)寬度和高度
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("文件尺寸應(yīng)為：720*1280画侣！");
file.value = "";
return false;
}
};
};
reader.readAsDataURL(filePic);
}else{
return false;
}
}
js實(shí)現(xiàn)上傳圖片類型+大小+尺寸驗(yàn)證
Input上傳文件的注意事項(xiàng)
- 問題描述：Input上傳文件時(shí)，同樣的文件上傳第二次不會(huì)觸發(fā)onchange回調(diào)
-
解決方案：onchange監(jiān)聽的為input的value值堡妒，只有再內(nèi)容發(fā)生改變的時(shí)候去觸發(fā)棉钧，而value在上傳文件的時(shí)候保存的是文件的內(nèi)容，你只需要在上傳成功的回調(diào)里面涕蚤，將當(dāng)前input的value值置空即可宪卿。event.target.value=”;
input 上傳第二次不能選擇同一文件
隱藏input默認(rèn)樣式
- 用其他元素調(diào)用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 元素來觸發(fā)一個(gè)隱藏的 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;
}
