jquery獲取file表單選擇文件的路徑、名字、大小、類型
一、問(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-12jQuery 連續(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-06JQuery validate插件驗(yàn)證用戶注冊(cè)信息
這篇文章主要為大家詳細(xì)介紹了JQuery validate插件驗(yàn)證用戶注冊(cè)信息的具體代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-05-05EasyUI學(xué)習(xí)之Combobox下拉列表(1)
這篇文章主要為大家詳細(xì)介紹了EasyUI學(xué)習(xí)之Combobox下拉列表的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12jQuery實(shí)現(xiàn)的文字逐行向上間歇滾動(dòng)效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的文字逐行向上間歇滾動(dòng)效果,涉及jQuery基于時(shí)間函數(shù)的頁(yè)面元素樣式動(dòng)態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下2017-09-09