JavaScript校验图片格式及大小
<!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校验图片格式及大小的更多相关文章
- JS验证图片格式和大小并预览
用于上传图片的js验证: <%@ page language="java" contentType="text/html; charset=UTF-8"p ...
- Extjs4 上传图片并进行图片格式以及大小验证
在做项目是遇到上传图片,并在前端限制图片上传的大小,下面就直接贴出主要的上传图片的代码,以及图片大小的验证,但前端没有验证图片的宽高验证 一.先创建出上传图片的组件,使用filefield组件 var ...
- javaScript校验图片大小、格式
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or ...
- C#验证是否是真的图片格式
做图片上传功能时,我们要限制用户上传的图片格式和大小. 但是,还有一种情况就是验证用户伪造的符合要求的图片,这种情况就必须要验证文件的真正格式. C#的办法时可以通过将文件读成二进制流,取前两个字节判 ...
- js上传文件(图片)的格式和大小限制
如果你想快速解决这个问题,看本文就够了.查了好多资料,终于解决了,太耗时间了,本文留给给后来者,希望你们工作的更轻松 本文保存为.html文件用浏览器打开即可测试功能 <form id=&quo ...
- Google最新的图片格式WEBP全面解析
前言 不管是 PC 还是移动端,图片一直是流量大头,以苹果公司 Retina 产品为代表的高 PPI 屏对图片的质量提出了更高的要求,如何保证在图片的精细度不降低的前提下缩小图片体积,成为了一个有价值 ...
- 关于webp图片格式初探
前言 不管是 PC 还是移动端,图片一直是流量大头,以苹果公司 Retina 产品为代表的高 PPI 屏对图片的质量提出了更高的要求,如何保证在图片的精细度不降低的前提下缩小图片体积,成为了一个有价值 ...
- PNG和Gif及JPEG图片格式比较
Gif格式特点 透明性Gif是一种布尔透明类型,既它可以是全透明,也可以是全不透明,但是它并没有半透明(alpha 透明). 动画Gif这种格式支持动画. 无损耗性Gif是一种无损耗的图像格式,这也意 ...
- 利用PhotoShop将Font-Awesome转为图片格式
介绍如何将Font-Awesome等字体图标转换为图片格式,使用PHOTPSHOP很简单. 网上找了很多,都比较麻烦.别问为什么要这么做,因为你还没遇到需要的时候. 下载Font-Awesome字体库 ...
随机推荐
- 6、Samba 服务器配置
1.安装samba服务 [root@rhel6_80 samba]# yum -y install samba #安装samba [root@rhel6_80 samba]# rpm -qa |gre ...
- javascript介绍
1.javascript的简介 1.1javascript的特点 1.安全性(不允许方问本地硬盘),它可以做的是信息的动态交互. 2.跨平台.(只要是可以解释js的浏览器都可以执行,与平台无关) 1. ...
- MyBatis学习(三)、动态SQL语句
三.动态SQL语句 有些时候,sql语句where条件中,需要一些安全判断,例如按某一条件查询时如果传入的参数是空,此时查询出的结果很可能是空的,也许我们需要参数为空时,是查出全部的信息.使用Orac ...
- bzoj3316: JC loves Mkk
Description Input 第1行,包含三个整数.n,L,R.第2行n个数,代表a[1..n]. Output 仅1行,表示询问答案.如果答案是整数,就输出整数:否则,输出既约分数“P/Q”来 ...
- React JSX语法说明
原文:http://my.oschina.net/leogao0816/blog/379487 什么是JSX? 在用React写组件的时候,通常会用到JSX语法,粗看上去,像是在Javascript代 ...
- JVM GC算法 CMS 详解(转)
前言 CMS,全称Concurrent Low Pause Collector,是jdk1.4后期版本开始引入的新gc算法,在jdk5和jdk6中得到了进一步改进,它的主要适合场景是对响应时间的重要性 ...
- SparkStreaming(源码阅读十二)
要完整去学习spark源码是一件非常不容易的事情,但是咱可以积少成多嘛~那么,Spark Streaming是怎么搞的呢? 本质上,SparkStreaming接收实时输入数据流并将它们按批次划分,然 ...
- 无废话WCF
1.什么是WCF 2.WCF应用的通信过程 3.WCF宿主 4.WCF配置文件 5.WCF通信模式 6.一个简单的DEMO
- jvm是如何管理内存的
1.JVM是如何管理内存的 Java中,内存管理是JVM自动进行的,无需人为干涉. 了解Java内存模型看这里:java内存模型是什么样的 了解jvm实例结构看这里:jvm实例的结构是什么样的 创建对 ...
- 转 Dynamics CRM Alert and Notification JavaScript Methods
http://www.powerobjects.com/2015/09/23/dynamics-crm-alert-and-notification-javascript-methods/ Befor ...