jQuery簡(jiǎn)單驗(yàn)證上傳文件大小及類(lèi)型的方法
本文實(shí)例講述了jQuery簡(jiǎn)單驗(yàn)證上傳文件大小及類(lèi)型的方法。分享給大家供大家參考,具體如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery1.8/jquery-1.8.0.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#myFile").change(function () {
var filepath = $("input[name='myFile']").val();
var extStart = filepath.lastIndexOf(".");
var ext = filepath.substring(extStart, filepath.length).toUpperCase();
if (ext != ".BMP" && ext != ".PNG" && ext != ".GIF" && ext != ".JPG" && ext != ".JPEG") {
alert("圖片限于bmp,png,gif,jpeg,jpg格式");
$("#fileType").text("")
$("#fileSize").text("");
return false;
} else { $("#fileType").text(ext) }
var file_size = 0;
if ($.browser.msie) {
var img = new Image();
img.src = filepath;
while (true) {
if (img.fileSize > 0) {
if (img.fileSize > 3 * 1024 * 1024) {
alert("圖片不大于100MB。");
} else {
var num03 = img.fileSize / 1024;
num04 = num03.toFixed(2)
$("#fileSize").text(num04 + "KB");
}
break;
}
}
} else {
file_size = this.files[0].size;
var size = file_size / 1024;
if (size > 10240) {
alert("上傳的圖片大小不能超過(guò)10M!");
} else {
var num01 = file_size / 1024;
num02 = num01.toFixed(2);
$("#fileSize").text(num02 + " KB");
}
}
return true;
});
});
</script>
<title>無(wú)標(biāo)題文檔</title>
</head>
<body>
<table width="500" cellspacing="0" cellpadding="0">
<tr>
<td width="72" id="fileType">
</td>
<td width="242">
<input type="file" name="myFile" id="myFile" />
</td>
<td width="184" id="fileSize" class="fileSize">
</td>
</tr>
</table>
</body>
</html>
PS:這里再為大家推薦幾款代碼格式化、美化工具,相信大家在以后的開(kāi)發(fā)過(guò)程中會(huì)用得到:
在線(xiàn)JavaScript代碼美化、格式化工具:
http://tools.jb51.net/code/js
JavaScript壓縮/格式化/加密工具:
http://tools.jb51.net/code/jscompress
C語(yǔ)言風(fēng)格/HTML/CSS/json代碼格式化美化工具:
http://tools.jb51.net/code/ccode_html_css_json
XML代碼在線(xiàn)格式化美化工具:
http://tools.jb51.net/code/xmlcodeformat
json代碼在線(xiàn)格式化/美化/壓縮/編輯/轉(zhuǎn)換工具:
http://tools.jb51.net/code/jsoncodeformat
在線(xiàn)JSON代碼檢驗(yàn)、檢驗(yàn)、美化、格式化工具:
http://tools.jb51.net/code/json
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題:《jQuery常用插件及用法總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jQuery動(dòng)畫(huà)與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- jQuery Ajax 上傳文件處理方式介紹(推薦)
- JQuery.uploadify 上傳文件插件的使用詳解 for ASP.NET
- 一個(gè)簡(jiǎn)單的jQuery插件ajaxfileupload.js實(shí)現(xiàn)ajax上傳文件例子
- jquery實(shí)現(xiàn)兼容IE8的異步上傳文件
- jQuery實(shí)現(xiàn)jQuery-form.js實(shí)現(xiàn)異步上傳文件
- jQuery插件ajaxFileUpload異步上傳文件
- 基于jQuery Ajax實(shí)現(xiàn)上傳文件
- jquery上傳插件fineuploader上傳文件使用方法(jquery圖片上傳插件)
- jQuery Ajax使用FormData對(duì)象上傳文件的方法
- Jquery實(shí)現(xiàn)異步上傳文件
相關(guān)文章
JQuery標(biāo)簽頁(yè)效果實(shí)例詳解
這篇文章主要介紹了JQuery標(biāo)簽頁(yè)效果,結(jié)合實(shí)例形式較為詳細(xì)的分析了jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)遍歷及切換標(biāo)簽頁(yè)的技巧,需要的朋友可以參考下2015-12-12
jQuery 導(dǎo)航自動(dòng)跟隨滾動(dòng)的實(shí)現(xiàn)代碼
這篇文章主要介紹了jQuery 導(dǎo)航自動(dòng)跟隨滾動(dòng)的實(shí)現(xiàn)代碼,需要的朋友可以參考下2018-05-05
jQuery插件開(kāi)發(fā)精品教程(讓你的jQuery更上一個(gè)臺(tái)階)
這篇jQuery插件開(kāi)發(fā)教程是小編見(jiàn)過(guò)的最詳細(xì)的了,每個(gè)解說(shuō)都很好,對(duì)于想做增強(qiáng)插件的朋友確實(shí)不錯(cuò)的參考資料,特分享下,方便需要的朋友2015-11-11
基于jQuery實(shí)現(xiàn)點(diǎn)擊同時(shí)更改兩個(gè)iframe的網(wǎng)址
最近寫(xiě)了兩個(gè)管理后臺(tái)的前端頁(yè)面,其中有一個(gè)管理后臺(tái),左側(cè)菜單導(dǎo)航和右側(cè)內(nèi)容頁(yè)是兩個(gè)iframe,需求是,點(diǎn)擊上面的主導(dǎo)航時(shí),左側(cè)iframe和右側(cè)iframe調(diào)用不同的鏈接.2010-07-07
jQuery實(shí)現(xiàn)頁(yè)面倒計(jì)時(shí)并刷新效果
頁(yè)面倒計(jì)時(shí)小編在很多網(wǎng)站都有這樣的需求,今天小編給大家分享一段jq代碼實(shí)現(xiàn)頁(yè)面倒計(jì)時(shí)并刷新效果,代碼簡(jiǎn)單易懂,非常不錯(cuò),需要的的朋友參考下2017-03-03
jQuery通過(guò)寫(xiě)入cookie實(shí)現(xiàn)更換網(wǎng)頁(yè)背景的方法
這篇文章主要介紹了jQuery通過(guò)寫(xiě)入cookie實(shí)現(xiàn)更換網(wǎng)頁(yè)背景的方法,涉及jQuery結(jié)合cookie設(shè)置頁(yè)面元素屬性的相關(guān)操作技巧,需要的朋友可以參考下2016-04-04
jQuery plugin animsition使用小結(jié)
本文通過(guò)實(shí)例代碼給大家分享了jQuery plugin animsition用法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2017-09-09

