使用jQuery實現(xiàn)驗證上傳圖片的格式與大小
更新時間:2014年12月03日 09:04:53 投稿:hebedich
在項目中,我們經(jīng)常要遇到上傳圖片,這就需要我們必須要驗證圖片的格式與大小,那么如何來操作呢,今天就給大家分享一個非常簡單的jQuery驗證上傳圖片的格式與大小的代碼。
代碼很簡單,常見的圖片格式均已加入驗證之中,小伙伴們可以直接拿去用的。
廢話少說,直接上代碼
復(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>無標題文檔</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>
以上代碼超級簡單,小伙伴們使用的時候自己記得美化下,這里就不多做解釋了。
您可能感興趣的文章:
- Jquery ajaxsubmit上傳圖片實現(xiàn)代碼
- 基于jquery實現(xiàn)的上傳圖片及圖片大小驗證、圖片預(yù)覽效果代碼
- jquery的ajaxSubmit()異步上傳圖片并保存表單數(shù)據(jù)演示代碼
- jquery 批量上傳圖片實現(xiàn)代碼
- 簡單實現(xiàn)jQuery上傳圖片顯示預(yù)覽功能
- jQuery AjaxUpload 上傳圖片代碼
- JQuery+ajax實現(xiàn)批量上傳圖片(自寫)
- jQuery實現(xiàn)上傳圖片前預(yù)覽效果功能
- 基于Jquery插件Uploadify實現(xiàn)實時顯示進度條上傳圖片
- jquery實現(xiàn)上傳圖片功能
相關(guān)文章
jQuery實現(xiàn)鼠標滑過商品小圖片上顯示對應(yīng)大圖片功能【測試可用】
這篇文章主要介紹了jQuery實現(xiàn)鼠標滑過商品小圖片上顯示對應(yīng)大圖片功能,涉及jQuery事件響應(yīng)、元素遍歷及屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2018-04-04使用jQuery獲取radio/checkbox組的值的代碼收集
很久沒有寫JQuery的文章了。今天來看下JQ對天Checkbox復(fù)選框的操作??聪旅娴囊粋€小例子。在這個例子中包括了以下幾個功能2009-12-12jQuery實現(xiàn)鼠標移到元素上動態(tài)提示消息框效果
當(dāng)光標移動到某些元素上時,會彈出像tips的提示框,這種效果想必大家都有見到過吧,下面有個不錯的示例,大家可以感受下2013-10-10jQuery Dialog 打開時自動聚焦的解決方法(兩種方法)
這篇文章主要介紹了jQuery Dialog 打開時自動聚焦的解決方法,及jquery dialog打開時,自動聚焦在第一個控件上的方法,對jquery dialog相關(guān)知識感興趣的朋友通過本文一起學(xué)習(xí)吧2016-11-11