使用jQuery實(shí)現(xiàn)驗(yàn)證上傳圖片的格式與大小
更新時(shí)間:2014年12月03日 09:04:53 投稿:hebedich
在項(xiàng)目中,我們經(jīng)常要遇到上傳圖片,這就需要我們必須要驗(yàn)證圖片的格式與大小,那么如何來操作呢,今天就給大家分享一個(gè)非常簡(jiǎn)單的jQuery驗(yàn)證上傳圖片的格式與大小的代碼。
代碼很簡(jiǎn)單,常見的圖片格式均已加入驗(yàn)證之中,小伙伴們可以直接拿去用的。
廢話少說,直接上代碼
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#form01").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格式");
return false;
}else{$("#name01").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)
$(".size02").text(num04+"KB");
}
break;
}
}
} else {
file_size = this.files[0].size;
console.log(file_size/1024/1024 + " MB");
var size = file_size / 1024;
if(size > 10240){
alert("上傳的文件大小不能超過10M!");
}else{
var num01 = file_size/1024;
num02 = num01.toFixed(2)
$("#size01").text(num02 + " KB");
}
}
return true;
});
});
</script>
<title>無標(biāo)題文檔</title>
</head>
<body>
<table width="500" cellspacing="0" cellpadding="0">
<tr>
<td width="72" id="name01"> </td>
<td width="242"><input type="file" name="myFile" id="form01" /></td>
<td width="184" id="size01" class="size02"> </td>
</tr>
</table>
</body>
</html>
以上代碼超級(jí)簡(jiǎn)單,小伙伴們使用的時(shí)候自己記得美化下,這里就不多做解釋了。
您可能感興趣的文章:
- Jquery ajaxsubmit上傳圖片實(shí)現(xiàn)代碼
- 基于jquery實(shí)現(xiàn)的上傳圖片及圖片大小驗(yàn)證、圖片預(yù)覽效果代碼
- jquery的ajaxSubmit()異步上傳圖片并保存表單數(shù)據(jù)演示代碼
- jquery 批量上傳圖片實(shí)現(xiàn)代碼
- 簡(jiǎn)單實(shí)現(xiàn)jQuery上傳圖片顯示預(yù)覽功能
- jQuery AjaxUpload 上傳圖片代碼
- JQuery+ajax實(shí)現(xiàn)批量上傳圖片(自寫)
- jQuery實(shí)現(xiàn)上傳圖片前預(yù)覽效果功能
- 基于Jquery插件Uploadify實(shí)現(xiàn)實(shí)時(shí)顯示進(jìn)度條上傳圖片
- jquery實(shí)現(xiàn)上傳圖片功能
相關(guān)文章
jQuery實(shí)現(xiàn)鼠標(biāo)滑過商品小圖片上顯示對(duì)應(yīng)大圖片功能【測(cè)試可用】
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)滑過商品小圖片上顯示對(duì)應(yīng)大圖片功能,涉及jQuery事件響應(yīng)、元素遍歷及屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-04-04使用jQuery獲取radio/checkbox組的值的代碼收集
很久沒有寫JQuery的文章了。今天來看下JQ對(duì)天Checkbox復(fù)選框的操作??聪旅娴囊粋€(gè)小例子。在這個(gè)例子中包括了以下幾個(gè)功能2009-12-12jQuery實(shí)現(xiàn)鼠標(biāo)移到元素上動(dòng)態(tài)提示消息框效果
當(dāng)光標(biāo)移動(dòng)到某些元素上時(shí),會(huì)彈出像tips的提示框,這種效果想必大家都有見到過吧,下面有個(gè)不錯(cuò)的示例,大家可以感受下2013-10-10jQuery Dialog 打開時(shí)自動(dòng)聚焦的解決方法(兩種方法)
這篇文章主要介紹了jQuery Dialog 打開時(shí)自動(dòng)聚焦的解決方法,及jquery dialog打開時(shí),自動(dòng)聚焦在第一個(gè)控件上的方法,對(duì)jquery dialog相關(guān)知識(shí)感興趣的朋友通過本文一起學(xué)習(xí)吧2016-11-11