jQuery實(shí)現(xiàn)判斷上傳圖片類型和大小的方法示例
本文實(shí)例講述了jQuery實(shí)現(xiàn)判斷上傳圖片類型和大小的方法。分享給大家供大家參考,具體如下:
這里使用jQuery判斷上傳圖片的類型和大?。?/p>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <form action="" method=""> <input type="file" id="file" /> </form> <p id="p_1">圖片格式為:</p> <p id="p_2">圖片大小為:</p> <script src="js/jquery-1.8.3.min.js"></script> <script> $(function(){ var p_1 = $('#p_1'), p_2 = $('#p_2'); $('body').on('change','#file',function(){ var path = $(this).val(), extStart = path.lastIndexOf('.'), ext = path.substring(extStart,path.length).toUpperCase(); //判斷圖片格式 if(ext !== '.PNG' && ext !== '.JPG' && ext !== '.JPEG' && ext !== '.GIF'){ alert('請(qǐng)上傳正確格式的圖片'); resetFile(); return false; }else{ p_1.html('圖片格式為:' + ext); } //獲取圖片大小,注意使用this,而不是$(this) var size = this.files[0].size / 1024; if(size > 10240){ alert('圖片大小不能超過(guò)10M'); resetFile(); return false; }else{ p_2.html('圖片大小為:' + size.toFixed(2) + 'KB'); } }) //還原 function resetFile(){ //清空f(shuō)ile表單的值,不能直接使用$('#file').val('')這種寫(xiě)法 $('form').html('<input type="file" id="file" />'); p_1.html('圖片格式為:'); p_2.html('圖片大小為:'); } }) </script> </body> </html>
lastIndexOf()
方法從后向前檢索指定字符串,如果出現(xiàn)了指定的字符,則返回該字符所在的位置,如果沒(méi)有,返回-1,位置從0開(kāi)始計(jì)數(shù)
toUpperCase()
方法轉(zhuǎn)換成大寫(xiě)字母
substring()
方法截取字符串,第一個(gè)參數(shù)為開(kāi)始的位置,第二個(gè)參數(shù)為結(jié)束的位置(如果省略,則默認(rèn)會(huì)截取到字符串的結(jié)尾),與slice()
和substr()
方法不同的是,substring()
不接受負(fù)的參數(shù)
slice()
方法同substring()
方法,區(qū)別是接受負(fù)的參數(shù)(若參數(shù)為負(fù)數(shù),則從字符串尾部開(kāi)始計(jì)算位置)
substr()
方法截取字符串,第一個(gè)參數(shù)是開(kāi)始的位置,第二個(gè)參數(shù)是截取的長(zhǎng)度(不同于slice和substring),現(xiàn)已不建議使用
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery圖片操作技巧大全》、《jQuery表格(table)操作技巧匯總》、《jQuery切換特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- 使用jQuery實(shí)現(xiàn)驗(yàn)證上傳圖片的格式與大小
- jQuery獲取file控件中圖片的寬高與大小
- 基于jQuery的圖片大小自動(dòng)適應(yīng)實(shí)現(xiàn)代碼
- 基于jquery實(shí)現(xiàn)圖片相關(guān)操作(重繪、獲取尺寸、調(diào)整大小、縮放)
- jquery預(yù)覽圖片實(shí)現(xiàn)鼠標(biāo)放上去顯示實(shí)際大小
- jQuery實(shí)現(xiàn)的上傳圖片本地預(yù)覽效果簡(jiǎn)單示例
- 簡(jiǎn)單實(shí)現(xiàn)jQuery上傳圖片顯示預(yù)覽功能
- JQuery Jcrop 實(shí)現(xiàn)圖片裁剪的插件
- jquery實(shí)現(xiàn)圖片上傳前本地預(yù)覽功能
- 基于Jquery的簡(jiǎn)單圖片切換效果
- 使用jquery獲取網(wǎng)頁(yè)中圖片高度的兩種方法
相關(guān)文章
jquery實(shí)現(xiàn)列表上下移動(dòng)功能
這篇文章主要為大家詳細(xì)介紹了jquery 實(shí)現(xiàn)列表上移、下移功能的相關(guān)資料,感興趣的小伙伴們可以參考一下2016-02-02jquery mobile實(shí)現(xiàn)撥打電話功能的幾種方法
在做一個(gè)便民服務(wù)電話,用到移動(dòng)web中列出的電話,點(diǎn)擊需要實(shí)現(xiàn)調(diào)用通訊錄,撥打電話功能,有需要的朋友可以參考一下2013-08-08jquery.Jwin.js 基于jquery的彈出層插件代碼
測(cè)試頁(yè)面需要引用jquery的js文件 插件文件jquery.Jwin.js jquery.Jwin插件的使用參數(shù)都有詳細(xì)說(shuō)明2012-05-05easyui取消表單實(shí)時(shí)驗(yàn)證,提交時(shí)統(tǒng)一驗(yàn)證的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇easyui取消表單實(shí)時(shí)驗(yàn)證,提交時(shí)統(tǒng)一驗(yàn)證的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11jQuery 實(shí)現(xiàn)左右兩側(cè)菜單添加、移除功能
本文通過(guò)實(shí)例代碼給大家分享了jQuery 實(shí)現(xiàn)左右兩側(cè)菜單添加、移除功能,需要的朋友參考下吧2018-01-01jQuery插件MixItUp實(shí)現(xiàn)動(dòng)畫(huà)過(guò)濾和排序
MixItUp過(guò)濾排序jQuery插件是一款鼠標(biāo)滑過(guò)圖片顯示描述的jQuery過(guò)濾排序插件。是一款輕量,但功能強(qiáng)大的 jQuery 插件,提供了對(duì)分類和有序內(nèi)容的美麗的動(dòng)畫(huà)過(guò)濾和排序功能。特別適合用于作品集網(wǎng)站,畫(huà)廊,圖片博客以及任何的分類或有序內(nèi)容。2015-04-04