<!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. Selenium2入门（三）WebDriver API之Get

    在上面的例子中,我们看到了WebDriver的一些方法,今天列举WebDriver的Get方法: import java.util.Set; import org.openqa.selenium.We ...

  2. 多线程下的 Lambda表达式 异步 WebClient 读取程序图标，来作为托盘 图标 logo ico

    //读取程序图标,来作为托盘图标this.notifyIcon.Icon = System.Drawing.Icon.ExtractAssociatedIcon(System.Windows.Form ...

  3. C# List 的一些操作 （两List元素是否想同，List是否包含在另一个List中）

    一. 假设有两个List<T>对象 ,List1和List2,如下方法判断两个List是否相等 List1.All(List2.Contains) && List1.Cou ...

  4. 重装系统后，delphi7打开报错

    delphi7运行不正常的提示unable to rename'c:\program files\Borland\delphi7\Bin\delphi32.$$$'to'c:\program file ...

  5. Map以及Set的遍历（EntrySet方法，补充enumeration和Iterator的区别）

    public void mearge(Map map) { Map returnMap = new HashMap<>(); // 转换为Entry Set<Map.Entry< ...

  6. [Mongodb] Tarball二进制包安装过程

    一.缘由: 用在线安装的方式安装mongodb,诚然很方便.但文件过于分散,如果在单机多实例的情况下,就不方便管理. 对于数据库的管理,我习惯将所有数据(配置)文件放在一个地方,方便查找区分. 二.解 ...

  7. Windows服务定时执行方式

    采用System.Timers.Timer 间隔固定时间执行 方式一:间隔固定的时间执行一次,关键代码: protected override void OnStart(string[] args) ...

  8. Python基础（二）之集合

    集合以{}形式表现,一个集合中的元素各不相同,即集合体现为去重的特性.主要用于关系测试,常见的集合操作:交集.并集.插件.子集.父集.对称差集等. 设置集合: list_1 = [1,3,4,5,7, ...

  9. win7下 安装 Flask

    参考: http://my.oschina.net/935572630/blog/375758 一 环境版本: os: win7 x64 python: 2.7.10 x64 二 安装步骤: 由于fl ...

  10. 通过JS简单实现图片缩放

    ;display: none;cursor: pointer;} #FullScreenDiv{;display: none;background-color: #919191;filter: alp ...