<!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. RAID简介

    RAID(独立磁盘冗余阵列)可以提供较普通磁盘更高的速度,安全性,所以服务器在安装时会选择创建RAID.RAID的创建有两种方式:软RAID(通过操作系统软件来实现)和硬raid(使用硬件整列卡) r ...

  2. Outlook2013 最小化Com加载项

  3. Web性能测试工具JMeter

    做Web方面的黑盒测试,也就是功能测试,基本不需要什么测试工具,都是直接打开浏览器访问,点一点界面就行. 现在流行的移动互联网应用,客户端和服务端的开发是分离的,两者开发进度肯定不一样,可能存在服务端 ...

  4. java 绘图

    java 绘图 圆形.线条.矩形.填充 插入图片 文字 //绘图 import java.awt.*; import javax.swing.*; public class Index extends ...

  5. 感知器、逻辑回归和SVM的求解

    这篇文章将介绍感知器.逻辑回归的求解和SVM的部分求解,包含部分的证明.本文章涉及的一些基础知识,已经在<梯度下降.牛顿法和拉格朗日对偶性>中指出,而这里要解决的问题,来自<从感知器 ...

  6. 如何自定义Flask中的响应类

    http://codingpy.com/article/customizing-the-flask-response-class/

  7. [Fraud] China UnionPay defrauded in Macau money laundering scandal

    Source: http://www.wantchinatimes.com/news-subclass-cnt.aspx?id=20140510000005&cid=1103 China Un ...

  8. C#入门（面向对象概念）

    也许是看概念性的东西太多了,所以一看基本就明白,但实际并没有掌握,有待实操.反而是UML(统一建模语言)引起了我的兴趣,发现这东东很像建筑行业的图纸:有标准和约定,很方便专业人士看懂程序的架构和逻辑. ...

  9. ubuntu 14.04 compiz的ALT + TAB切换程序

    安装完ubuntu,发现不能使用ALT + TAB切换应用程序,翻遍所有百度结果,没有可行,都是拷这个拷那个...真实无语...FQgoogle,看的第一个就完美解决.记录下来,方便国人少走弯路. 首 ...

  10. Solaris 自动挂载

    修改文件:vim /etc/vfstab添加命令:/dev/dsk/c2t0d0p0:1             -               /media/PARTITION1    pcfs   ...