jQuery是一種廣泛使用的JavaScript庫(kù),它簡(jiǎn)化了HTML文檔操作、事件處理、動(dòng)畫效果和AJAX等許多常見的JavaScript任務(wù)。其中,input file事件可以用來監(jiān)聽HTML文件上傳控件的變化,當(dāng)文件被選擇時(shí)便會(huì)觸發(fā)該事件。
$('input[type="file"]').on('change', function(e) {
console.log(e.target.files);
})
上面的代碼使用jQuery監(jiān)聽了一個(gè)type為file的input元素,并綁定了change事件。當(dāng)用戶選擇了一個(gè)或多個(gè)文件后,就會(huì)觸發(fā)該事件。事件處理函數(shù)中會(huì)打印出被選擇的文件列表。同樣,我們也可以獲取文件名、文件大小、文件類型等信息,從而完成一些常見的需求,比如驗(yàn)證上傳文件的類型、限制上傳文件的大小等。
$('input[type="file"]').on('change', function(e) {
var file = e.target.files[0];
var fileSize = file.size;
var fileType = file.type;
if(fileType != 'image/png' && fileType != 'image/jpeg') {
alert('只能上傳PNG和JPG格式的圖片!');
return false;
}
if(fileSize >1024 * 1024) {
alert('上傳文件大小不能超過1MB!');
return false;
}
// 文件驗(yàn)證通過,上傳文件...
})
在上面的代碼中,我們通過遍歷e.target.files數(shù)組,獲取了第一個(gè)文件的對(duì)象,進(jìn)而獲取了文件的大小和類型。我們可以利用這些信息對(duì)上傳的文件進(jìn)行驗(yàn)證,如果不符合要求就提示用戶并返回false,否則就進(jìn)行文件上傳的操作。這里僅僅是一個(gè)簡(jiǎn)單的例子,實(shí)際開發(fā)中可能會(huì)有更復(fù)雜的需求,但原理都是類似的。