<!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. .NET设计规范————命名规范

    NET设计规范:约定.惯用法与模式———命名规范 前言:          最近在看<.NET设计规范:约定.惯用法与模式>一书,主要还是讲.NET的设计规范,以前对这一块也不是特别在意, ...

  2. 彻底卸载 RAD Studio 2009/2010/XE

    彻底卸载 RAD Studio 2009/2010/XE: 控制面板-->添加/删除程序中执行了卸载操作以后, 还需要做以下工作: 1. 删除以下目录(注意有些目录是隐藏的): %ALLUSER ...

  3. SVN代码回滚命令之---"svn up ./ -r 版本号"---OK

    一.改动还没被提交的情况(未commit) 这种情况下,见有的人的做法是删除work copy中文件,然后重新update,恩,这种做法达到了目的,但不优雅,因为这种事没必要麻烦服务端. 其实一个命令 ...

  4. json 与jsonp 特点及区别

    简单描述JSON跟JSONP的区别以及实战 什么是JSON? 前面简单说了一下,JSON是一种基于文本的数据交换方式,或者叫做数据描述格式,你是否该选用他首先肯定要关注它所拥有的优点. JSON的优点 ...

  5. [手机取证] “神器”IP-BOX的一些问题

    网上最近传的纷纷扬扬的iOS密码破解神器IP-BOX,很多人感兴趣,作为一个该产品的老用户,来破除一下迷信,顺便做个普及~ Q1:这东西好神奇,是不是所有都能破解? A1:支持简单密码的穷举,有条件的 ...

  6. 【HOW】如何限制Reporting Services报表导出功能中格式选项

    Reporting Services报表导出功能中缺省会提供多种导出格式选项,但很多情况下不需要全部的格式选项,因此需要对这些选项进行限制.下面我们以SQL Server 2008 R2为例来说明对这 ...

  7. 问题解决_WCF_WCF 接收我服务的 HTTP 响应时发生错误

    原文地址:http://www.cnblogs.com/tianma3798/p/5470974.html 错误内容: System.ServiceModel.CommunicationExcepti ...

  8. iOS 在tableView上添加button导致按钮没有点击效果和不能滑动的 zhuang

    转载请注明出处. 今天在调试代码的时候,在tableviewcell上添加button,发现button快速点击的话,是看不出点击效果的,查找资料发现, ios7上UITableViewCell子层容 ...

  9. showModalDialog 的重要提示

    模态对话框,没有opener,不能用window.opener.location.reload();或window.parent.location.reload();要通过返回值来判断关闭后刷新. f ...

  10. 用MyEclipse自动生成SessionFactory文件

    1.Hibernate1->MyEclipse->Capabilities->Install Hibernate Facet.如图所示. 2.选择Hibernate的版本. 3.创建 ...