jquery獲取file表單選擇文件的路徑、名字、大小、類型
更新時(shí)間：2019年01月18日 14:08:24 作者：muzidigbig
今天小編就為大家分享一篇關(guān)于jquery獲取file表單選擇文件的路徑、名字、大小、類型，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧
一、問(wèn)題
在使用file表單時(shí)想知道選擇的文件的路徑、名字、大小、類型？
二、知識(shí)點(diǎn)
1.input表單會(huì)觸發(fā)change事件
2.獲取路徑 觸發(fā)這個(gè)事件的對(duì)象調(diào)用val()函數(shù)
3.文件名 觸發(fā)事件后會(huì)有一個(gè)事件對(duì)象e.currentTarget.files[0].name
4.文件大小 e.currentTarget.files[0].size 字節(jié)
5.文件類型 e.currentTarget.files[0].type
三、測(cè)試代碼
<body>
<p class="inp_file_name">未選擇</p>
<input type="file" class="inp_file">
<button class="cancel_file_but">清除選擇的文件</button>
</body>
<script src="./js/jquery-3.3.1.js"></script>
<script>
$('.inp_file').change(function(e){
// console.log($(this).val());//val()獲取到的是完整的文件路徑值；C:\fakepath\js-dom.png
console.log(e)
/*
簡(jiǎn)單的獲取選擇文件的名字
currentTarget:獲取到的是綁定事件的對(duì)象
e.currentTarget.files 是一個(gè)數(shù)組，如果支持多個(gè)文件，則需要遍歷
*/
var fileMsg = e.currentTarget.files;
var fileName = fileMsg[0].name;
console.log(fileName);//js-dom.png
//大小 字節(jié)
var fileSize = fileMsg[0].size;
console.log(fileSize);//350061
//類型
var fileType = fileMsg[0].type;
console.log(fileType);//image/png
// 判斷文件類型
var type=(fileType.substr(fileType.lastIndexOf("."))).toLowerCase();
if(type!=".jpg"&&type!=".gif"&&type!=".jpeg"&& type!=".png"){
alert("您上傳圖片的類型不符合(.jpg|.jpeg|.gif|.png)！");
return false;
}
$('.inp_file_name').text(fileName)
})
$('.cancel_file_but').click(function(){
$('.inp_file').val(null);
})
</script>
四、效果
未選前
選擇后
若有不足請(qǐng)多多指教！希望給您帶來(lái)幫助！
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請(qǐng)查看下面相關(guān)鏈接
您可能感興趣的文章:
相關(guān)文章
jQuery EasyUI 折疊面板accordion的使用實(shí)例(分享)
下面小編就為大家分享一篇jQuery EasyUI 折疊面板accordion的使用實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
jQuery 連續(xù)列表實(shí)現(xiàn)代碼
你有沒(méi)有手工的編寫(xiě)過(guò)一些重復(fù)的代碼？你也覺(jué)得它們是如此的無(wú)聊吧。好了，這里有更好的解決辦法。2009-12-12
如何使用jQUery獲取選中radio對(duì)應(yīng)的值(一句代碼)
一些基本的語(yǔ)法在使用中老忘掉,下列使用jQUery獲取選中radio對(duì)應(yīng)的值，剛剛想起來(lái)，感興趣的朋友可以了解下2013-06-06
JQuery validate插件驗(yàn)證用戶注冊(cè)信息
這篇文章主要為大家詳細(xì)介紹了JQuery validate插件驗(yàn)證用戶注冊(cè)信息的具體代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-05-05
本文主要對(duì)jQuery中的DOM操作進(jìn)行了詳細(xì)全面的介紹。文中舉了簡(jiǎn)單例子，便于理解與學(xué)習(xí)，對(duì)初學(xué)者具有很好的參考價(jià)值，需要的朋友一起來(lái)看下吧2016-12-12
這篇文章主要介紹了jQuery中die()方法用法,實(shí)例分析了die()方法的功能、定義及移除所有通過(guò)live()方法向指定元素添加的一個(gè)或多個(gè)事件處理程序的使用技巧,需要的朋友可以參考下2015-01-01
EasyUI學(xué)習(xí)之Combobox下拉列表(1)
這篇文章主要為大家詳細(xì)介紹了EasyUI學(xué)習(xí)之Combobox下拉列表的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
jquery子元素過(guò)濾選擇器在某些特殊的情況下還是比較實(shí)用的，下面為大家介紹下具體的使用方法，感興趣的各位可以參考下哈2013-06-06
jQuery實(shí)現(xiàn)的文字逐行向上間歇滾動(dòng)效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的文字逐行向上間歇滾動(dòng)效果,涉及jQuery基于時(shí)間函數(shù)的頁(yè)面元素樣式動(dòng)態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下2017-09-09
進(jìn)度條和Loading加載動(dòng)畫(huà)在當(dāng)今的網(wǎng)頁(yè)功能中顯得越來(lái)越重要了，于是接下來(lái)為大家推薦幾款比較新穎進(jìn)度條插件,感興趣的你可以參考下希望可以幫助到你2013-03-03