JS验证图片格式和大小并预览的简单实例


Posted in Javascript onOctober 11, 2016

实例如下:

function photoCheck(obj){
    var ff = $("#photoSrc").val();
    if(ff == null || ff == ""){
      return;
    }
    photo_flag = true;
    var fSize = 50.9 * 1024;
    var fileType;
    var fileSize;
    var filePath;
    if (obj.files) { // webkit, mozilla... (jq:$.support.boxModel)  // ff & chrome
      var reader = new FileReader();
      var thisFile = obj.files[0];
      var isFirefox=navigator.userAgent.indexOf("Firefox");  //ff 下获取图片大小
      fileType = thisFile.type;
      fileSize = isFirefox > 0 ? thisFile.size : thisFile.fileSize; 
      reader.readAsDataURL(thisFile);
      
      reader.onloadend = function(event) {
        var imgObj = new Image();
        imgObj.src = event.target.result; // image src
        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();
      var path = document.selection.createRange().text;
      var img = new Image(); 
      img.src = path; 
      
      var fileType = 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");
    }
  }

用于上传图片的验证

下面讲解上面的代码:

下面是一个用户上传头像的格式和大小的验证的方法,在用户注册的时候要求用户上传头像的时候进行的验证。在方法中我给予了最详细的注释

<script type="text/javascript">
function photoCheck(obj){
 var ff = $("#photoSrc").val();

 //获取文件的路径
  if(ff == null || ff == ""){
    return;
  }
  photo_flag = true;
  var fSize = 50.9 * 1024;//设置图像的大小为50kb,这里你可以自己设置
  var fileType;
  var fileSize;
  var filePath;

 if (obj.files) { 

 // obj.files 是chrome,firefox等浏览器的对戏那个,如果是ie的话他的值就是false
    var reader = new FileReader();
//这个FileReader在稍后会进行较详细的描述,要注意的是只有 Firefox 3.6+ 和 Chrome 6.0+ 实现了 FileReader 接口。
    var thisFile = obj.files[0];//获取文件的对像
    var isFirefox=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: 开头的字符串,这段字符串的实质就是 Data URI,Data URI是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件
    reader.onloadend = function(event) {

//文件读取成功完成时触发
      
      var imgObj = new Image();
      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();
    var path = document.selection.createRange().text;
//ie下返回上传时选定的文件路径

    var img = new Image(); 
    img.src = path; 
    
    var fileType = 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>
<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 ,否则即是读取的结果,绝大多数的程序都会在成功读取文件的时候,抓取这个值。

以上就是小编为大家带来的JS验证图片格式和大小并预览的简单实例全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
封装的原生javascript弹出层代码
Sep 24 Javascript
function foo的原型与prototype属性解惑
Nov 19 Javascript
为EasyUI的Tab标签添加右键菜单的方法
Jul 14 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
Jul 24 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
Sep 19 Javascript
JavaScript中日常收集常见的10种错误(推荐)
Jan 08 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
Apr 22 Javascript
详解angular2如何手动点击特定元素上的点击事件
Oct 16 Javascript
layui点击弹框页面 表单请求的方法
Sep 21 Javascript
基于Vue实现微前端的示例代码
Apr 24 Javascript
Vue 样式切换及三元判断样式关联操作
Aug 09 Javascript
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
js判断文件格式及大小的简单实例(必看)
Oct 11 #Javascript
js 判断附件后缀的简单实现方法
Oct 11 #Javascript
判断数组的最佳方法(推荐)
Oct 11 #Javascript
JavaScript中cookie工具函数封装的示例代码
Oct 11 #Javascript
深入理解JS中的Function.prototype.bind()方法
Oct 11 #Javascript
Bootstrap轮播插件使用代码
Oct 11 #Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
Oct 11 #Javascript
You might like
用PHP4访问Oracle815
2006/10/09 PHP
URL Rewrite的设置方法
2007/01/02 PHP
PHP 替换模板变量实现步骤
2009/08/24 PHP
PHP 命令行工具 shell_exec, exec, passthru, system详细使用介绍
2011/09/11 PHP
非常好用的两个PHP函数 serialize()和unserialize()
2012/02/04 PHP
PHP制作万年历
2015/01/07 PHP
Yii2 rbac权限控制之rule教程详解
2016/06/23 PHP
使用PHP连接多种数据库的实现代码(mysql,access,sqlserver,Oracle)
2016/12/21 PHP
PHPExcel中文帮助手册|PHPExcel使用方法(分享)
2017/06/09 PHP
PHP实现微信提现功能
2018/09/30 PHP
PHP微信发送推送消息乱码的解决方法
2019/02/28 PHP
php简单检测404页面的方法示例
2019/08/23 PHP
js常见表单应用技巧
2008/01/09 Javascript
页面中body onload 和 window.onload 冲突的问题的解决
2009/07/01 Javascript
jQuery中position()方法用法实例
2015/01/16 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
2015/07/09 Javascript
在Html中使用Requirejs进行模块化开发实例详解
2016/04/15 Javascript
vue-resourse将json数据输出实例
2017/03/08 Javascript
vue组件从开发到发布的实现步骤
2018/11/11 Javascript
浅谈js闭包理解
2019/04/01 Javascript
深入了解JavaScript代码覆盖
2019/06/13 Javascript
js实现点击图片在屏幕中间弹出放大效果
2019/09/11 Javascript
详解uniapp的全局变量实现方式
2021/01/11 Javascript
原生JS实现音乐播放器的示例代码
2021/02/25 Javascript
python多线程操作实例
2014/11/21 Python
windows上安装Anaconda和python的教程详解
2017/03/28 Python
python使用paramiko模块通过ssh2协议对交换机进行配置的方法
2019/07/25 Python
djano一对一、多对多、分页实例代码
2019/08/16 Python
python 计算两个列表的相关系数的实现
2019/08/29 Python
关于Python3爬虫利器Appium的安装步骤
2020/07/29 Python
CSS3中的display:grid,网格布局介绍
2019/10/30 HTML / CSS
亚马逊西班牙购物网站:amazon西班牙
2017/03/06 全球购物
探索欧洲最好的品牌:Bombinate
2019/06/14 全球购物
幼儿园安全工作总结2015
2015/04/20 职场文书
浅谈Redis主从复制以及主从复制原理
2021/05/29 Redis
GTX1650super好不好 gtx1650super显卡属于什么级别
2022/04/08 数码科技