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 ...
随机推荐
- Android WiFi密码(查看工具)
纯手机端AIDE编写,现在分享出源码 & apk文件. 注: 使用此工具需要root权限. apk文件 : http://yunpan.cn/cHPLZ8zH5BQBV (提取码:9cd2) ...
- Hadoop-1.2.1 升级到Hadoop-2.6.0 HA
Hadoop-1.2.1到Hadoop-2.6.0升级指南 作者 陈雪冰 修改日期 2015-04-24 版本 1.0 本文以hadoop-1.2.1升级到hadoop-2.6.0 Z ...
- SpringMVC拦截器详解[附带源码分析]
目录 前言 重要接口及类介绍 源码分析 拦截器的配置 编写自定义的拦截器 总结 总结 前言 SpringMVC是目前主流的Web MVC框架之一. 如果有同学对它不熟悉,那么请参考它的入门blog:h ...
- 3dmax模型制作备忘录
md2导出: http://thegreystudios.com/blog/?p=278 http://wenku.baidu.com/view/4d5652e2524de518964b7d89.ht ...
- [ASP.NET MVC 小牛之路]15 - Model Binding
Model Binding(模型绑定)是 MVC 框架根据 HTTP 请求数据创建 .NET 对象的一个过程.我们之前所有示例中传递给 Action 方法参数的对象都是在 Model Binding ...
- Base 64 编码
原创地址:http://www.cnblogs.com/jfzhu/p/4020097.html 转载请注明出处 (一)Encoding VS. Encryption 很多人都以为编码(Encodin ...
- java 反编译利器JD-JUI
下载地址: http://download.csdn.net/download/suixingbugai/4145221
- angularjs指令参数transclude
angularjs指令参数transclude transclude翻译为嵌入,和之前看到的vue中的slots作用差不多,目的是将指令元素的子内容嵌入到指令的模板中 定义指令 <div sid ...
- WaitType：ASYNC_NETWORK_IO
官方文档的定义,是指SQL Server 产生的结果集需要经过Network传递到Client,Network不能很快将结果集传输到Client,导致结果集仍然驻留在SQL Server的Sessio ...
- SSRS1：配置SMTP Server发送mail
为了使用SSRS发送mail,必须为Reporting service配置SMTP Server. 1,在Reporting Service Configuration Manager中配置Email ...