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 相关文章推荐
jQuery之ajax技术的详细介绍
Jun 19 Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
Jul 31 Javascript
JQuery给元素绑定click事件多次执行的解决方法
May 29 Javascript
js实现简单秒表走动的时钟特效
Mar 25 Javascript
JavaScript动态创建div等元素实例讲解
Jan 06 Javascript
JavaScript中的冒泡排序法
Aug 03 Javascript
Angular下H5上传图片的方法(可多张上传)
Jan 09 Javascript
详解JavaScript按概率随机生成事件
Aug 02 Javascript
仿京东快报向上滚动的实例
Dec 13 Javascript
使用vue实现各类弹出框组件
Jul 03 Javascript
浅谈vue权限管理实现及流程
Apr 23 Javascript
node脚手架搭建服务器实现token验证的方法
Jan 20 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+oracle 分页类
2006/10/09 PHP
数组与类使用PHP的可变变量名需要的注意的问题
2013/06/20 PHP
Zend Studio使用技巧两则
2016/04/01 PHP
PHP安装GeoIP扩展根据IP获取地理位置及计算距离的方法
2016/07/01 PHP
yii2-GridView在开发中常用的功能及技巧总结
2017/01/07 PHP
用jscript实现新建word文档
2007/06/15 Javascript
Javascript读取cookie函数代码
2010/10/16 Javascript
基于jquery的下拉框改变动态添加和删除表格实现代码
2020/09/12 Javascript
Javascript变量函数浅析
2011/09/02 Javascript
nodejs实现黑名单中间件设计
2014/06/17 NodeJs
js创建对象的区别示例介绍
2014/07/24 Javascript
jQuery实现购物车表单自动结算效果实例
2015/08/10 Javascript
jQuery图片拖动组件Dropzone用法示例
2017/01/17 Javascript
JS闭包可被利用的常见场景小结
2017/04/09 Javascript
微信小程序 支付后台java实现实例
2017/05/09 Javascript
vue 1.0 结合animate.css定义动画效果
2018/07/11 Javascript
JavaScript笛卡尔积超简单实现算法示例
2018/07/30 Javascript
Vue的watch和computed方法的使用及区别介绍
2018/09/06 Javascript
详解webpack-dev-server使用方法
2018/09/14 Javascript
Vuejs中的watch实例详解(监听者)
2020/01/05 Javascript
ES6对象操作实例详解
2020/05/23 Javascript
[01:23:24]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第三场 2月7日
2021/03/11 DOTA
python实现爬取百度图片的方法示例
2019/07/06 Python
DataFrame.to_excel多次写入不同Sheet的实例
2019/12/02 Python
python正则表达式 匹配反斜杠的操作方法
2020/08/07 Python
MoviePy常用剪辑类及Python视频剪辑自动化
2020/12/18 Python
一款纯css3实现的鼠标经过按钮特效教程
2014/11/09 HTML / CSS
HTML5+css3:3D旋转木马效果相册
2017/01/03 HTML / CSS
美国机场停车位预订:About Airport Parking
2018/03/26 全球购物
Farah官方网站:男士服装及配件
2019/11/01 全球购物
英国买鞋网站:Charles Clinkard
2019/11/14 全球购物
自我评价的正确写法
2013/09/19 职场文书
廉政承诺书范文
2015/04/28 职场文书
党员转正申请报告
2015/05/15 职场文书
2016五四青年节活动总结范文
2016/04/06 职场文书
Python实现双向链表
2022/05/25 Python