码迷,mamicode.com
首页 > 编程语言 > 详细

javaScript校验图片大小、格式

时间:2015-04-11 23:46:04      阅读:194      评论:0      收藏:0      [点我收藏+]

标签:



1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <script src="/js/jquery-1.4.2.min.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(document).ready( 8 function() { 9 $("#form01").change( 10 function() { 11 var filepath = $("input[name=‘myFile‘]").val(); 12 var extStart = filepath.lastIndexOf("."); 13 var ext = filepath.substring(extStart, 14 filepath.length).toUpperCase(); 15 if (ext != ".BMP" && ext != ".PNG" && ext != ".GIF" 16 && ext != ".JPG" && ext != ".JPEG") { 17 alert("图片限于bmp,png,gif,jpeg,jpg格式"); 18 return false; 19 } else { 20 $("#name01").text(ext) 21 } 22 var file_size = 0; 23 if ($.browser.msie) { 24 var img = new Image(); 25 img.src = filepath; 26 while (true) { 27 if (img.fileSize > 0) { 28 if (img.fileSize > 3 * 1024 * 1024) { 29 alert("图片不大于100MB。"); 30 } else { 31 var num03 = img.fileSize / 1024; 32 num04 = num03.toFixed(2) 33 $(".size02").text(num04 + "KB"); 34 } 35 break; 36 } 37 } 38 } else { 39 file_size = this.files[0].size; 40 console.log(file_size / 1024 / 1024 + " MB"); 41 var size = file_size / 1024; 42 if (size > 10240) { 43 alert("上传的文件大小不能超过10M!"); 44 } else { 45 var num01 = file_size / 1024; 46 num02 = num01.toFixed(2) 47 $("#size01").text(num02 + " KB"); 48 } 49 } 50 return true; 51 }); 52 }); 53 </script> 54 <title>无标题文档</title> 55 </head> 56 <body> 57 <table width="500" cellspacing="0" cellpadding="0"> 58 <tr> 59 <td width="72" id="name01"></td> 60 <td width="242"><input type="file" name="myFile" id="form01" /></td> 61 <td width="184" id="size01" class="size02"></td> 62 </tr> 63 </table> 64 </body> 65 </html>

 

javaScript校验图片大小、格式

标签:

原文地址:http://www.cnblogs.com/shinubi/p/4418588.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!