JS验证图片格式和大小并预览
用于上传图片的js验证：
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>图片效验</title>
</head>
<script type="text/javascript" src="../../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
/*
*图片验证
*/
function photoCheck(obj){
var ff = $("#photoSrc").val();
if(ff == null || ff == ""){
alert("请选择文件");
return;
}else if(!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(ff)){
alert("图片类型必须是.gif,jpeg,jpg,png中的一种");
return;
}
photo_flag = true;
//设置限制图像的大小为10MB，这里你可以自己设置
var fSize = 1024 * 1024 *10;
//限制图片宽高
var fHeight = 3000;
var fWidth = 3000; var fileType;
var fileSize;
var filePath;
var img = new Image();
//显示图片
if (obj.files) {
//用来把文件读入内存，并且读取文件中的数据，要注意的是只有 Firefox 3.6+ 和 Chrome 6.0+ 实现了 FileReader 接口。
var reader = new FileReader();
//获取文件的对像
var thisFile = obj.files[0];
//获取上传文件的类型，一般来说，如果类型是image/jpeg,.jpg,.gif等等图片格式的话就是合理的
fileType = thisFile.type;
//获取当前上传的文件的大小
fileSize=thisFile.size;
/*readAsDataURL：该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URI，Data URI是一种将小
文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件*/
reader.readAsDataURL(thisFile);
//文件读取成功完成时触发
reader.onloadend = function(event){
// 图像的路径
img.src = event.target.result;
// 图片加载完毕后
img.onload = function(event) {
//效验图片规格
specification(img);
filePath = this.src;
if(photo_flag){
//设置图片为当前上传的图片路径
$("#imgShow").attr("src", filePath);
}else{
//否则设置默认的图片
$("#imgShow").attr("src", "default.jpg");
}
}
} }else{// 如果是ie浏览器 //选择当前全部文本内容
obj.select();
/*
为选择的内容创建一个Range对象，在.text转换成文本
什么是Range？https://my.oschina.net/122612475/blog/286302
所谓"Range"，是指HTML文档中任意一段内容。一个Range的起始点和结束点位置任意，甚至起始点和结束点可
以是一样的（也就是空Range）。最常见的Range是用户文本选择范围(user text selection)。当用户选择了
页面上的某一段文字后，你就可以把这个选择转为Range。当然，你也可以直接用程序定义Range
*/
var path = document.selection.createRange().text;
img.src = path;
//效验图片规格
specification(img);
//取出文件后缀
var fileType = path.substring(path.length-4,path.length);
if(img.readyState == "complete") {
//图片加载完毕,获取图片的大小
fileSize = img.fileSize;
}else{
//当的该对象的 load state 改变时，会触发此事件
img.onreadystatechange = function(){
// 当图片load完毕
if(img.readyState=='complete'){
fileSize = img.fileSize;
if(fileSize > fSize){
photo_flag = false;
$("#imgShow").attr("src", "default.jpg");
return;
}
}
}
}
if (path) {
filePath = path;
}
} //图片格式的判断
if(
fileType != ".jpg" && fileType != ".JPG" && fileType != "image/jpeg" &&
fileType != ".png" && fileType != ".PNG" && fileType != "image/png" &&
fileType != ".gif" && fileType != ".GIF" && fileType != "image/gif"
){
alert("图片类型必须是.gif,jpeg,jpg,png中的一种");
photo_flag = false;
$("#imgShow").attr("src", "default.jpg");
return;
}
//效验图片内存大小
if(fileSize > fSize){
alert("图片太大了！");
photo_flag = false;
$("#imgShow").attr("src", "default.jpg");
return;
}
if(photo_flag){
$("#imgShow").attr("src", filePath);
} else {
$("#imgShow").attr("src", "default.jpg");
}
// 匿名函数:效验图片规格
var specification = function(image){
if(image.width >= fWidth || image.height >= fHeight){
alert("*提示：文件大小不对。您只能上传小于等于"+fWidth+"*"+fHeight+"尺寸的图片");
$("#imgShow").attr("src", "default.jpg");
return;
}
}
} </script>
<body>
<input type="file" name="usertx" id="photoSrc" value="文件上传" onchange="photoCheck(this)"/>
<div>
//显示图片的div
<img src="" id="imgShow" style="width:100px;height:100px"></img>
</div>
</body>
</html>
如果是在chrome（谷歌浏览器）下上传的头像的话，我们查看的起src路径会发现 发现该方法将文件读取为一段以 data: 开头的字符串，像上面描述的一样，正是FileReader中readAsDataURL的作用，下面介绍下FileReader
| 方法名 | 参数 | 描述 |
|---|---|---|
| abort | none | 中断读取 |
| readAsBinaryString | file | 将文件读取为二进制码 |
| readAsDataURL | file | 将文件读取为 DataURL |
| readAsText | file, [encoding] | 将文件读取为文本 |
readAsText： 该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容。
readAsBinaryString： 它将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。
readAsDataURL： 这是例子程序中用到的方法，该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URI，Data URI是一种将小文件直接嵌入文档的方
案。这里的小文件通常是指图像与 html 等格式的文件 FileReader还有以下的事件
| 事件 | 描述 |
|---|---|
| onabort | 中断时触发 |
| onerror | 出错时触发 |
| onload | 文件读取成功完成时触发 |
| onloadend | 读取完成触发，无论成功或失败 |
| onloadstart | 读取开始时触发 |
| onprogress | 读取中 |
文件一旦开始读取，无论成功或失败，实例的 result 属性都会被填充。如果读取失败，则 result 的值为 null ，否则即是读取的结果，绝大多数的程序都会在成功读取文件的时候，抓取这个值。
本文参考：喜youngyoung
JS验证图片格式和大小并预览的更多相关文章
- js实现图片上传后即时预览
//关于FileReader对象 http://blog.csdn.net/zk437092645/article/details/8745647 <!DOCTYPE html> < ...
- JS实现图片上传之前先预览
<html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat=&quo ...
- JavaScript校验图片格式及大小
<!DOCTYPE html> <html> <head> <title>JavaScript校验图片格式及大小</title> <s ...
- JS验证邮箱格式是否正确 实例代码
如何用js验证邮箱格式是否正确?分享一个例子.代码: /* *验证邮箱格式是否正确 *参数strEmail,需要验证的邮箱 */ function chkEmail(strEmail) { if (! ...
- 分离与继承的思想实现图片上传后的预览功能：ImageUploadView
本文要介绍的是网页中常见的图片上传后直接在页面生成小图预览的实现思路,考虑到该功能有一定的适用性,于是把相关的逻辑封装成了一个ImageUploadView组件,实际使用效果可查看下一段的git效果图 ...
- java多图片上传--前端实现预览--图片压缩 、图片缩放，区域裁剪，水印，旋转，保持比例。
java多图片上传--前端实现预览 前端代码: https://pan.baidu.com/s/1cqKbmjBSXOhFX4HR1XGkyQ 解压后: java后台: <!--文件上传--&g ...
- web 图片上传实现本地预览
在说上传之前先说说如何替换or美化浏览器自带的简陋上传按钮(自定义自己的上传按钮 如:img): 1.将自定义上传按钮上方添加 input file 框,实现input实现透明处理. 2.对自定义上传 ...
- Extjs4 上传图片并进行图片格式以及大小验证
在做项目是遇到上传图片,并在前端限制图片上传的大小,下面就直接贴出主要的上传图片的代码,以及图片大小的验证,但前端没有验证图片的宽高验证 一.先创建出上传图片的组件,使用filefield组件 var ...
- JS验证邮箱格式是否正确的代码
验证邮箱格式是否正确的方法有很多,接下来为大家介绍下使用js是如何做到的 复制代码代码如下: /* *验证邮箱格式是否正确 *参数strEmail,需要验证的邮箱 */ www.jbxue.co ...
随机推荐
- Jquery 系列（1） 基本认识
本系列Jquery所用测试Demo版本是<uncompressed,development jQuery 1.11.3> 最新的jquery包可以从官网下载请参照http://jquery ...
- Spket在Eclipse下的安装和配置（图文教程）
一.Spket简介 Spket是一个RIA的开发工具,具有代码自动完成.语法高亮.内容概要等功能,可以帮助开发人员高效的编写JavaScript程序. 效果图: 二.安装Spket 1.去官网(htt ...
- 代码自定义双色title的按钮
所图所示,通过代码自定义这样的按钮. .h文件 // // CustomButtom.h // testPlus // // Created by 鹰眼 on 14/10/20. // Copyrig ...
- HDFS Client 设计实现解析
前面对 HDFS NameNode 和 DataNode 的架构设计实现要点做了介绍,本文对 HDFS 最后一个主要构成组件 Client 做进一步解析. 流式读取 HDFS Client 为客户端应 ...
- MSDN杂志上Wix相关的文章
使用 MSBuild 和 Windows Installer XML 执行自动发布: http://msdn.microsoft.com/zh-cn/magazine/cc163456.aspx 用于 ...
- 微信双开是定时炸弹？关于非越狱iOS上微信分身高危插件ImgNaix的分析
作者:蒸米@阿里移动安全 序言 微信作为手机上的第一大应用,有着上亿的用户.并且很多人都不只拥有一个微信帐号,有的微信账号是用于商业的,有的是用于私人的.可惜的是官方版的微信并不支持多开的功能,并且频 ...
- .NET WEB程序员需要掌握的技能
本来这个是我给我们公司入职的新人做一个参考,由于 @张善友 老师在他的微信号转了我的这篇文章<<.Net WEB 程序员需要掌握的技能>>,很多人觉得比较有用,说是看了后知道一 ...
- 备忘-Sql server Timeout expired 超时时间已到. 达到了最大池大小 错误及Max Pool Size设置
select * from sysprocesses where dbid= db_id('数据库名') 通过此语句可查看目前所有的连接进程 不够了就必须设置Max Pool Size,理论最大值为3 ...
- [ASP.NET MVC 大牛之路]03 - C#高级知识点概要(2) - 线程和并发
本人博客已转移至:http://www.exblr.com/liam 我也想过跳过C#高级知识点概要直接讲MVC,但经过前思后想,还是觉得有必要讲的.我希望通过自己的经验给大家一些指引,带着大家一起 ...
- Azure PowerShell (1) PowerShell入门
<Windows Azure Platform 系列文章目录> Update: 2016-01-11 笔者文档主要都是用Azure PowerShell 0.x版本来实现的,比如0.98版 ...