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. C. Permute Digits dfs大模拟

    http://codeforces.com/contest/915/problem/C 这题麻烦在前导0可以直接删除,比如 1001 100 应该输出11就好 我的做法是用dfs,每一位每一位的比较. ...

  2. EOF是什么

    我学习C语言的时候,遇到的一个问题就是EOF. 它是end of file的缩写,表示"文字流"(stream)的结尾.这里的"文字流",可以是文件(file) ...

  3. [转]Using the HTML5 and jQuery UI Datepicker Popup Calendar with ASP.NET MVC - Part 4

    本文转自:http://www.asp.net/mvc/overview/older-versions/using-the-html5-and-jquery-ui-datepicker-popup-c ...

  4. Neutron命令测试3

    1.打开Ubuntu的/etc/network/interfaces文件 .默认内容如下 auto lo iface lo inet loopback 2.如果以DHCP方式配置网卡,则改为:auto ...

  5. web service, wcf, wcf rest, web api之间的区别

    在.NET Framework中,有很多种技术可以创建基于http协议的服务,譬如说web service, wcf,wcf rest和web api等等.网上有很多的文章教我们如何开发.使用这几种技 ...

  6. 网页URLs

    Extending Python Interpretor: https://docs.python.org/3/extending/index.html Aliyun Mriirors: https: ...

  7. C语言的各种输入情况介绍(ACM中常用到)

    1.最简单的输入输出形式: 计算a+b的值: scanf("%d%d",&a,&b); printf("%d\n",a+b);--------- ...

  8. C++ VS编译问题--LINK : fatal error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏

    用VS编译时,当出现错误LINK : fatal error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏: 这个问题的解决方案为: 1. 找到项目\xx属性\配置属性\清单工具\输 ...

  9. Eclipse Action

    Interface IAction package org.eclipse.jface.action; import org.eclipse.core.commands.IHandlerAttribu ...

  10. Touch事件传递的实验

    通过自定义的Relayout   LinearLayout   TextView , 布局为:     分别打印事件方法: 1.当所有的都是super的时候,点击TextView的时候,事件的传递是: ...