<!DOCTYPE html>

<html>

<head>

<title>JavaScript校验图片格式及大小</title>

<script type="text/javascript">

var isIE = /msie/i.test(navigator.userAgent) && !window.opera;

function fileChange(target,id) {

var fileSize = 0;// 图片大小

var filetypes =[".jpg",".png"];// 图片类型

var filepath = target.value;// 图片路径

var filemaxsize = 1024*10;// 图片最大10M

if(filepath){

var isnext = false;

var fileend = filepath.substring(filepath.indexOf("."));

if(filetypes && filetypes.length>0){

for(var i =0; i<filetypes.length;i++){

if(filetypes[i]==fileend){

isnext = true;

break;

}

}

}

if(!isnext){

alert("不接受此图片类型");

target.value ="";

return false;

}

}else{

return false;

}

if (isIE && !target.files) {

var filePath = target.value;

var fileSystem = new ActiveXObject("Scripting.FileSystemObject");

if(!fileSystem.FileExists(filePath)){

alert("图片不存在，请重新输入");

return false;

}

var file = fileSystem.GetFile (filePath);

fileSize = file.Size;

} else {

fileSize = target.files[0].size;

}

var size = fileSize / 1024;

if(size > filemaxsize){

alert("图片大小不能超过10M");

target.value ="";

return false;

}

if(size<=0){

alert("图片大小不能为0M");

target.value ="";

return false;

}

// 上传图片到服务器

var path = '/img/year/';

$.ajaxFileUpload({

url:'${contextPath}/do/file/uploadFile/?path='+path,

secureuri:false,

fileElementId:'fileuploade',

dataType: 'json',

success: function (data, status){

var path = data.path;

var imgHost = data.imgHost;

$("#img_file").css("display","block");

$("#tempimg").attr("src",imgHost+path);

$("#add_img_url").val(path);

},

error: function (data, status, e){

$.messager.alert('操作提示', '上传失败！');

}

});

}

</script>

</head>

<body>

　　<input type="file" id="fileuploade" name="file_path" onchange="fileChange(this);">

</body>

JavaScript校验图片格式及大小的更多相关文章

  1. JS验证图片格式和大小并预览

    用于上传图片的js验证: <%@ page language="java" contentType="text/html; charset=UTF-8"p ...

  2. Extjs4 上传图片并进行图片格式以及大小验证

    在做项目是遇到上传图片,并在前端限制图片上传的大小,下面就直接贴出主要的上传图片的代码,以及图片大小的验证,但前端没有验证图片的宽高验证 一.先创建出上传图片的组件,使用filefield组件 var ...

  3. javaScript校验图片大小、格式

    1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or ...

  4. C#验证是否是真的图片格式

    做图片上传功能时,我们要限制用户上传的图片格式和大小. 但是,还有一种情况就是验证用户伪造的符合要求的图片,这种情况就必须要验证文件的真正格式. C#的办法时可以通过将文件读成二进制流,取前两个字节判 ...

  5. js上传文件（图片）的格式和大小限制

    如果你想快速解决这个问题,看本文就够了.查了好多资料,终于解决了,太耗时间了,本文留给给后来者,希望你们工作的更轻松 本文保存为.html文件用浏览器打开即可测试功能 <form id=&quo ...

  6. Google最新的图片格式WEBP全面解析

    前言 不管是 PC 还是移动端,图片一直是流量大头,以苹果公司 Retina 产品为代表的高 PPI 屏对图片的质量提出了更高的要求,如何保证在图片的精细度不降低的前提下缩小图片体积,成为了一个有价值 ...

  7. 关于webp图片格式初探

    前言 不管是 PC 还是移动端,图片一直是流量大头,以苹果公司 Retina 产品为代表的高 PPI 屏对图片的质量提出了更高的要求,如何保证在图片的精细度不降低的前提下缩小图片体积,成为了一个有价值 ...

  8. PNG和Gif及JPEG图片格式比较

    Gif格式特点 透明性Gif是一种布尔透明类型,既它可以是全透明,也可以是全不透明,但是它并没有半透明(alpha 透明). 动画Gif这种格式支持动画. 无损耗性Gif是一种无损耗的图像格式,这也意 ...

  9. 利用PhotoShop将Font-Awesome转为图片格式

    介绍如何将Font-Awesome等字体图标转换为图片格式,使用PHOTPSHOP很简单. 网上找了很多,都比较麻烦.别问为什么要这么做,因为你还没遇到需要的时候. 下载Font-Awesome字体库 ...

随机推荐

  1. 转 MySQL 数据备份与还原

    MySQL 数据备份与还原 原贴:http://www.cnblogs.com/kissdodog/p/4174421.html   一.数据备份 1.使用mysqldump命令备份 mysqldum ...

  2. Eclipse 开发 jsp

    下载 eclipse EE   注意 是eclipse EE 版本 下载  apache-tomcat-8.0.15 只下载上面二个 从Window -> Preferences -> S ...

  3. linux---mysql安装

    一.查询本机是否有mysql service mysql status 二.检查已安装的mysql版本 mysql –uroot -p status 三.查看已安装的mysql的组件 dpkg --g ...

  4. AD域修改组策略

    如果我们的计算机加入AD域之后,修改安全策略时不能用本地策略来修改.具体修改方法: .Start(开始)–Programs(程序)–Administrative Tools(管理工具)–Group P ...

  5. Xposed Module开发教程1

    看了一下文档,发现Xposed这货实在太强大了,它直接对Zygote做了一些手脚,简直是无所不能.缺点就是需要安装一下框架.基本原理就是把Android 系统的app_process给替换了,然后启动 ...

  6. JS中两个感叹号!!的意义

    var foo = true; console.log(!foo); // false console.log(!!foo); // true 两个 !! 就是 非非 如果值为boolean值 两个感 ...

  7. BMP头文件格式以及C语言读取头文件【转】

    BMP头文件格式以及C语言读取头文件[转] (2011-12-24 22:59:17) 转载▼ 标签: 杂谈 分类: 各个领域的知识 BMP图像文件由三部分组成:位图文件头数据结构,它包含BMP图像文 ...

  8. 通过单元测试理解spring容器以及dubbo+zookeeper单元测试异常处理

    一.先说一个结论:单元测试与主项目的spring容器是隔离的,也就是说,单元测试无法访问主项目spring容器,需要自己加载spring容器. 接下来是代码实例,WEB主项目出于运行状态,单元测试中可 ...

  9. socket listen参数中的backlog 的意义!

    服务器监听时,在每次处理一个客户端的连接时是需要一定时间的,这个时间非常的短(也许只有1ms 或者还不到),但这个时间还是存在的.而这个backlog 存在的意义就是:在这段时间里面除了第一个连接请求 ...

  10. SQL查询一个月第一天/最后一天及日期格式化

    1.一个月第一天的Select DATEADD(mm, DATEDIFF(mm,0,getdate()), 0) 2.本周的星期一Select DATEADD(wk, DATEDIFF(wk,0,ge ...