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 相关文章推荐
JS中showModalDialog 的使用解析
Apr 17 Javascript
关于js里的this关键字的理解
Aug 17 Javascript
Underscore源码分析
Dec 30 Javascript
详解Angular4 路由设置相关
Aug 26 Javascript
关于预加载InstantClick的问题解决方法
Sep 12 Javascript
JavaScript如何实现元素全排列实例代码
May 14 Javascript
Vue分页插件的前后端配置与使用
Oct 09 Javascript
Vue解析带html标签的字符串为dom的实例
Nov 13 Javascript
webpack 最佳配置指北(推荐)
Jan 07 Javascript
JS严格模式原理与用法实例分析
Apr 27 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
Sep 09 Javascript
微信小程序实现翻牌抽奖动画
Sep 21 Javascript
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
可以保证单词完整性的PHP英文字符串截取代码分享
2014/07/15 PHP
分享10篇优秀的jQuery幻灯片制作教程及应用案例
2011/04/16 Javascript
JavaScript高级程序设计 事件学习笔记
2011/09/10 Javascript
JavaScript中奇葩的假值示例应用
2014/03/11 Javascript
javascript记录文本框内文字个数检测文字个数变化
2014/10/14 Javascript
jquery实现先淡出再折叠收起的动画效果
2015/08/07 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
2016/10/21 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
2016/11/29 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
2017/04/16 Javascript
详解angular ui-grid之过滤器设置
2017/06/07 Javascript
Angular 4.X开发实践中的踩坑小结
2017/07/04 Javascript
原生js 封装get ,post, delete 请求的实例
2017/08/11 Javascript
微信小程序之页面跳转和参数传递的实现
2017/09/29 Javascript
Taro集成Redux快速上手的方法示例
2018/06/21 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
2018/07/09 jQuery
Vue导出页面为PDF格式的实现思路
2018/07/31 Javascript
详解Angular中通过$location获取地址栏的参数
2018/08/02 Javascript
简单实现vue中的依赖收集与响应的方法
2019/02/18 Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
2019/04/09 Javascript
jQuery操作cookie的示例代码
2019/06/05 jQuery
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
2020/05/14 Javascript
微信小程序手动添加收货地址省市区联动
2020/05/18 Javascript
在树莓派2或树莓派B+上安装Python和OpenCV的教程
2015/03/30 Python
Python实现文件复制删除
2016/04/19 Python
Python 序列的方法总结
2016/10/18 Python
Python实现mysql数据库更新表数据接口的功能
2017/11/19 Python
python os模块简单应用示例
2019/05/23 Python
python学习笔记之多进程
2020/08/06 Python
实例教程 纯CSS3打造非常炫的加载动画效果
2014/11/05 HTML / CSS
当当网软件测试笔试题
2015/11/24 面试题
升职自荐书范文
2013/11/28 职场文书
致跳远运动员广播稿
2014/02/11 职场文书
《狼和小羊》教学反思
2014/04/20 职场文书
创意婚礼策划方案
2014/05/18 职场文书
英语课外活动总结
2014/08/27 职场文书
SQLServer2019 数据库环境搭建与使用的实现
2021/04/08 SQL Server