javaScript校验图片大小、格式


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>
时间: 2024-08-11 05:31:20

javaScript校验图片大小、格式的相关文章

[代码片段]javascript检查图片大小和格式

function checkImgType(input) { var this_ = document.getElementsByName('imgFile')[0]; var filepath = this_.value; var extStart = filepath.lastIndexOf("."); var ext = filepath.substring(extStart, filepath.length).toUpperCase(); if (ext != ".P

在ASP.NET MVC下实现单个图片上传, 客户端服务端双重限制图片大小和格式, 服务端裁剪图片

在"MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件01-单文件上传"一文中,使用JSAjaxFileUploader这款插件实现了单文件上传,在chrome, firefox下运行良好,但在某些版本的IE浏览器(比如IE8,IE9)下却无法正常运行,这可能是因为JSAjaxFileUploader插件在编写时没有考虑到某些低版本IE浏览器导致的.本篇,就在ASP.NET MVC4下实现单个图片上传,具体功能包括: 1.在客户端选择图片,并限

关于前端使用JavaScript获取base64图片大小的方法

base64原理 Base64编码要求把3个8位字节(38=24)转化为4个6位的字节(46=24),之后在6位的前面补两个0,形成8位一个字节的形式. 如果剩下的字符不足3个字节,则用0填充,输出字符使用'=',因此编码后输出的文本末尾可能会出现1或2个'=' 如何获取base64图片大小 通过base64编码原理我们知道,base64的图片字符流中的每8个字符就有两个是用0补充,而且字符流的末尾还可能存在'='号,我们可以通过这个原理计算图片的文件流大小. getImgByteSize(da

11-利用session校验图片认证码

/****************************************************************产生随机验证码的servlet********************************************************************/ package response; import java.awt.Color;import java.awt.Font;import java.awt.Graphics;import java.aw

WebView加载HTML图片大小自适应与文章自动换行

http://www.brighttj.com/ios/ios-webview-load-html-image-adaptive.html 在很多App中都会使用到webview,尤其是在加载新闻内容等文章形式的数据时.因为图文混编以及不同字体格式的显示,在iOS进行编辑和显示都是一大问题(当然,iOS中也可以用CoreText进行绘制),但是对于web端来说,一个富文本编辑器就可以完美解决这个问题.所以后台很多时候会直接返回HTML代码拿给前端解析,这时,在客户端对HTML代码的处理就显得尤为

Javascript 验证上传图片大小[客户端验证]

需求分析: 在做上传图片的时候,如果不限制上传图片大小,后果非常的严重.那么我们怎样才可以解决一个棘手的问题呢?有两种方式: 1)后台处理: 也就是AJAX POST提交到后台,把图片上传到服务器上,然后获得该图片大小做处理. 2)前台处理: 也就是利用Javascript获取该图片大小. 显然第一种方式,很不好.因为需要把文件先上传到服务器上,如果文件很大的话,在加上网不是很快,需要等待好长时间,治标不治本. 功能解析: 在这里我只介绍IE与FireFox两个浏览器的不同做法. IE6: 关键

Javascript验证上传图片大小[前台处理]

需求分析: 在做上传图片的时候,如果不限制上传图片大小,后果非常的严重.那么我们怎样才可以解决一个棘手的问题呢?有两种方式: 1)后台处理: 也就是AJAX POST提交到后台,把图片上传到服务器上,然后获得该图片大小做处理. 2)前台处理: 也就是利用Javascript获取该图片大小. 显然第一种方式,很不好.因为需要把文件先上传到服务器上,如果文件很大的话,在加上网不是很快,需要等待好长时间,治标不治本. 功能解析: 在这里我只介绍IE与FireFox两个浏览器的不同做法. IE6: 关键

jquery实现上传图片及图片大小验证、图片预览效果代码

jquery实现上传图片及图片大小验证.图片预览效果代码 上传图片验证 */ function submit_upload_picture(){     var file = $('file_c').value;     if(!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(file)){            alert("图片类型必须是.gif,jpeg,jpg,png中的一种")        }else{      $('both_form')

动态等比例调整图片大小的jQuery代码

动态等比例调整图片大小的jQuery代码:有时候图片的大小和尺寸是位置,如果上传后,任由其自然伸展,很有可能导致网页变形,所以要认为的控制图片的尺寸,当然也不能够太粗暴,直接定死图片的尺寸,这样可能会导致图片变形,所以要进行等比例缩放,下面就是一段能够实现此功能的代码.代码如下: <script type="text/javascript"> jQuery(window).load(function(){ jQuery("div.product_info img&