1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <script src="/js/jquery-1.4.2.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>

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

  1. JavaScript校验图片格式及大小

    <!DOCTYPE html> <html> <head> <title>JavaScript校验图片格式及大小</title> <s ...

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

    function checkImgType(input) { var this_ = document.getElementsByName('imgFile')[0]; var filepath = ...

  3. C#上传图片（含有图片大小格式过滤以及改变像素安全存储）

    示例一: public JsonResult Upload(string parameter) { ]; try { //LogHelper.Info("文件长度:" + file ...

  4. javascript笔记——图片大小检测

    <html> <head> <script type="text/javascript"> var isIE = /msie/i.test(na ...

  5. SpringMVC 图片上传，检查图片大小

    使用SpringMVC+Spring 前端提交图片文件到Controller,检查上传图片大小是否符合要求 直接上代码了 1.校验图片大小 这里提供出验证的方法,用于在需要校验的地方调用 /** * ...

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

    在"MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件01-单文件上传"一文中,使用JSAjaxFileUploader这款插件实现了单文 ...

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

    base64原理 Base64编码要求把3个8位字节(38=24)转化为4个6位的字节(46=24),之后在6位的前面补两个0,形成8位一个字节的形式. 如果剩下的字符不足3个字节,则用0填充,输出字 ...

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

    http://www.brighttj.com/ios/ios-webview-load-html-image-adaptive.html 在很多App中都会使用到webview,尤其是在加载新闻内容 ...

  9. 图片上传并显示（兼容ie），图片大小判断

    图片上传并显示(兼容ie),图片大小判断 HTML <div id="swf" style="margin: 0 auto;text-align: center;& ...

随机推荐

  1. 更换 npm 源国内镜像 cnpm

    默认镜像源 https://www.npmjs.com/ 临时改变镜像源 方法一:通过config配置指向国内镜像源 npm config set registry http://registry.c ...

  2. Unity Unity发布的ios包在iphone上声音小的原因

    实质上声音是从话筒里出来的,未走扬声器. 仔细查找文档发现是PlayerSettings里的设置不当引起的. 在PlayerSettings取消勾选 Prepare iOS for Recording ...

  3. (转)ping命令

    ping命令 原文:https://www.cnblogs.com/peida/archive/2013/03/06/2945407.html Linux系统的ping命令是常用的网络命令,它通常用来 ...

  4. 深入学习webpack（二）

    深入学习webpack(二) 在深入学习webpack(一)中,我通过一个例子介绍了webpack的基本使用方法,下面将更为系统的学习webpack的基本概念,对于一门技术的掌握我认为系统化还是很重要 ...

  5. Quartz使用(3) - Quartz核心接口Trigger

    Trigger最常用的有两种SimpleTrigger和CronTrigger,首先介绍Trigger的一些基础的信息,然后会详细描述这两种Trigger. 1. 通用Trigger属性 quartz ...

  6. HDU 5360——Hiking——————【贪心+优先队列】

    Hiking Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)Total Su ...

  7. 浅谈SQL Server中的三种物理连接操作(Nested Loop Join、Merge Join、Hash Join)

    简介 在SQL Server中,我们所常见的表与表之间的Inner Join,Outer Join都会被执行引擎根据所选的列,数据上是否有索引,所选数据的选择性转化为Loop Join,Merge J ...

  8. 移动webApp - 1像素实现（点5像素的秘密）

    在移动web项目中,经常会实现以下1像素的边框 移动web设计中,在retina显示屏下网页会由1px会被渲染为2px,那么视觉稿中1px的线条还原成网页需要css定义为0.5px 但是正当我们去用0 ...

  9. canvas的globalAlphaAPI

    canvas的globalAlphaAPI

  10. ionic3+angular4+cordova 项目实例

    去年年底到现在几个月一直在忙项目,angular已经更新到angular4,ionic也同步更新到ionic3,这几天抽空用ionic3做了个小demo,代码发布到码云, https://gitee. ...