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 ...
随机推荐
- IOS网络第七天WebView-01WebView和网页的交互1
******** #import "HMViewController.h" @interface HMViewController () <UIWebViewDelegate ...
- [转]ios push
转:http://blog.csdn.net/showhilllee/article/details/8631734 APNS的推送机制 首先我们看一下苹果官方给出的对ios推送机制的解释.如下图 P ...
- RBAC模型速记
RBAC Model core concept: user,role,permission,operation,resource user has many roles, assign role to ...
- 剑指Offer面试题：31.两个链表的第一个公共节点
一.题目:两个链表的第一个公共节点 题目:输入两个链表,找出它们的第一个公共结点. 链表结点定义如下,这里使用C#语言描述: public class Node { public int key; p ...
- iOS开发系列--C语言之基础知识
概览 当前移动开发的趋势已经势不可挡,这个系列希望浅谈一下个人对IOS开发的一些见解,这个IOS系列计划从几个角度去说IOS开发: C语言 OC基础 IOS开发(iphone/ipad) Swift ...
- [ASP.NET MVC 小牛之路]12 - Section、Partial View 和 Child Action
概括的讲,View中的内容可以分为静态和动态两部分.静态内容一般是html元素,而动态内容指的是在应用程序运行的时候动态创建的内容.给View添加动态内容的方式可归纳为下面几种: Inline cod ...
- CI框架搭建
CI 框架等移植到不同等环境十分方便,只要改很少等配置: 1.修改config.php 文件(修改这一个文件就可以跑通了): $config['base_url'] = 'http://127.0.0 ...
- Js toString()方法笔记
一.前言 toString()用于将该对象以字符串(string)的形式返回,该方法属于Object对象;也就是说对象都能够使用此方法. 之前所接触的是array.toString()数组转换为字符串 ...
- MySQL常用命令和常见问题
MySQL常用命令和常见问题 --创建数据库并设置字符集 create database wip default character set utf8 collate utf8_general_ci; ...
- MongoDB 内嵌文档
MongoDB是文档型的数据库系统,doc是MongoDB的数据单位,每个doc相当于关系型数据库的数据行(row),doc和row的区别在于field的原子性:row中的column是不和分割的原子 ...