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 ...
随机推荐
- for 循环中 continue
- React源码剖析系列 － 生命周期的管理艺术
目前,前端领域中 React 势头正盛,很少能够深入剖析内部实现机制和原理.本系列文章希望通过剖析 React 源码,理解其内部的实现原理,知其然更要知其所以然. 对于 React,其组件生命周期(C ...
- MySQL KEY分区
200 ? "200px" : this.width)!important;} --> 介绍 KEY分区和HASH分区相似,但是KEY分区支持除text和BLOB之外的所有数 ...
- ASP.NET Web API路由系统：Web Host下的URL路由
ASP.NET Web API提供了一个独立于执行环境的抽象化的HTTP请求处理管道,而ASP.NET Web API自身的路由系统也不依赖于ASP.NET路由系统,所以它可以采用不同的寄宿方式运行于 ...
- Git Shell 基本命令(官网脱水版)
用户信息 当安装完 Git 应该做的第一件事就是设置你的用户名称与邮件地址. 这样做很重要,因为每一个 Git 的提交都会使用这些信息,并且它会写入到你的每一次提交中,不可更改: $ git conf ...
- Node.js返回JSONP
在使用JQuery的Ajax从服务器请求数据或者向服务器发送数据时常常会遇到跨域无法请求的错误,常用的解决办法就是在Ajax中使用JSONP.基于安全性考虑,浏览器会存在同源策略,然而<scri ...
- solve the problem of 'java web project cannot display verification code'
my java code of the function: package com.util; import java.awt.Color; import java.awt.Font; import ...
- [译]AngularJS中DOM操作
再翻译一篇干货短文,原文:AngularJS jQuery 虽然Angularjs将我们从DOM的操作中解放出来了,但是很多时候我们还是会需要在controller/view加载之后执行一些DOM操作 ...
- 小谈Java里的线程
今天,我们来谈一谈Java里的线程. 一.进程与线程的基本概念 大家可能没听过线程这个概念,但是相信,用计算机的朋友都听过进程这个概念.打开电脑的任务管理器,我们就可以看到许多进程.它们主要分为三类, ...
- meta标签中的http-equiv属性使用介绍（转载）
meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言, ...