JS验证图片格式和大小并预览的简单实例
实例如下：
functionphotoCheck(obj){
varff=$("#photoSrc").val();
if(ff==null||ff==""){
return;
}
photo_flag=true;
varfSize=50.9*1024;
varfileType;
varfileSize;
varfilePath;
if(obj.files){//webkit,mozilla...(jq:$.support.boxModel)//ff&chrome
varreader=newFileReader();
varthisFile=obj.files[0];
varisFirefox=navigator.userAgent.indexOf("Firefox");//ff下获取图片大小
fileType=thisFile.type;
fileSize=isFirefox>0?thisFile.size:thisFile.fileSize;
reader.readAsDataURL(thisFile);
reader.onloadend=function(event){
varimgObj=newImage();
imgObj.src=event.target.result;//imagesrc
imgObj.onload=function(event){
filePath=this.src;
if(photo_flag){
$("#imgShow").attr("src",filePath);
}else{
$("#imgShow").attr("src","<%=request.getContextPath()%>/userTx/default.jpg");
}
}
}
}else{/////////////////////////////////////////////ie
obj.select();
varpath=document.selection.createRange().text;
varimg=newImage();
img.src=path;
varfileType=path.substring(path.length-4,path.length);
if(img.readyState=="complete"){
fileSize=img.fileSize;
}else{
img.onreadystatechange=function(){
if(img.readyState=='complete'){//当图片load完毕
fileSize=img.fileSize;
if(fileSize>fSize){
setMsg('photoSrc_msg','图片太大了！','reg_wrong');
photo_flag=false;
$("#imgShow").attr("src","<%=request.getContextPath()%>/userTx/default.jpg");
return;
}
}
}
}
if(path){
filePath=path;
}
}
if(fileType!=".jpg"&&fileType!=".JPG"&&fileType!="image/jpeg"){//image/jpeg
setMsg('photoSrc_msg','图片格式错误！','reg_wrong');
photo_flag=false;
$("#imgShow").attr("src","<%=request.getContextPath()%>/userTx/default.jpg");
return;
}
if(fileSize>fSize){
setMsg('photoSrc_msg','图片太大了！','reg_wrong');
photo_flag=false;
$("#imgShow").attr("src","<%=request.getContextPath()%>/userTx/default.jpg");
return;
}
setMsg('photoSrc_msg','正确','reg_ok');
if(photo_flag){
$("#imgShow").attr("src",filePath);
}else{
$("#imgShow").attr("src","<%=request.getContextPath()%>/userTx/default.jpg");
}
}
用于上传图片的验证
下面讲解上面的代码：
下面是一个用户上传头像的格式和大小的验证的方法，在用户注册的时候要求用户上传头像的时候进行的验证。在方法中我给予了最详细的注释
<scripttype="text/javascript">
functionphotoCheck(obj){
varff=$("#photoSrc").val();
//获取文件的路径
if(ff==null||ff==""){
return;
}
photo_flag=true;
varfSize=50.9*1024;//设置图像的大小为50kb，这里你可以自己设置
varfileType;
varfileSize;
varfilePath;
if(obj.files){
//obj.files是chrome，firefox等浏览器的对戏那个，如果是ie的话他的值就是false
varreader=newFileReader();
//这个FileReader在稍后会进行较详细的描述，要注意的是只有Firefox3.6+和Chrome6.0+实现了FileReader接口。
varthisFile=obj.files[0];//获取文件的对像
varisFirefox=navigator.userAgent.indexOf("Firefox");
//注意这个是判断当前用户使用的浏览器是哪一种，如果返回的值是大于0的话,那么表示浏览器是当前浏览器，例如isFirefox>0上诉的就是firefox
fileType=thisFile.type;
//获取文件的类型，一般来说，如果类型是image/jpeg,.jpg,.gif等等图片格式的话就是合理的
fileSize=thisFile.size;//获取当前上传的文件的大小
fileSize=isFirefox>0?thisFile.size:thisFile.fileSize;
//如果是firefox,调用
reader.readAsDataURL(thisFile);
//readAsDataURL：该方法将文件读取为一段以data:开头的字符串，这段字符串的实质就是DataURI，DataURI是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与html等格式的文件
reader.onloadend=function(event){
//文件读取成功完成时触发
varimgObj=newImage();
imgObj.src=event.target.result;//图像的路径
imgObj.onload=function(event){
//图片加载完毕后
filePath=this.src;
if(photo_flag){
$("#imgShow").attr("src",filePath);
//设置图片为当前上传的图片路径
}else{
$("#imgShow").attr("src","default.jpg");
//否则设置默认的图片
}
}
}
}else{//如果是ie
obj.select();
varpath=document.selection.createRange().text;
//ie下返回上传时选定的文件路径
varimg=newImage();
img.src=path;
varfileType=path.substring(path.length-4,path.length);
if(img.readyState=="complete"){
//图片加载完毕,获取图片的大小
fileSize=img.fileSize;
}else{
img.onreadystatechange=function(){
if(img.readyState=='complete'){
//当图片load完毕
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"){
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");
}
}
</script>
</head>
<body>
<inputtype="file"name="usertx"id="photoSrc"value="文件上传"onchange="photoCheck(this)"/>
<div>
//显示图片的div
<imgsrc=""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:开头的字符串，这段字符串的实质就是DataURI，DataURI是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与html等格式的文件
FileReader还有以下的事件
事件描述
onabort
中断时触发
onerror
出错时触发
onload
文件读取成功完成时触发
onloadend
读取完成触发，无论成功或失败
onloadstart
读取开始时触发
onprogress
读取中
文件一旦开始读取，无论成功或失败，实例的result属性都会被填充。如果读取失败，则result的值为null，否则即是读取的结果，绝大多数的程序都会在成功读取文件的时候，抓取这个值。
以上就是小编为大家带来的JS验证图片格式和大小并预览的简单实例全部内容了，希望大家多多支持毛票票~