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 鼠标拖动图标技术
Feb 07 Javascript
在Google 地图上实现做的标记相连接
Jan 05 Javascript
jQuery实现简单的文件上传进度条效果
Mar 26 Javascript
JavaScript判断微信浏览器实例代码
Jun 13 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
Mar 06 Javascript
使用requirejs模块化开发多页面一个入口js的使用方式
Jun 14 Javascript
用vue写一个仿简书的轮播图的示例代码
Mar 13 Javascript
react-navigation之动态修改title的内容
Sep 26 Javascript
浅谈vue项目用到的mock数据接口的两种方式
Oct 09 Javascript
利用js canvas实现五子棋游戏
Oct 11 Javascript
vue中使用router全局守卫实现页面拦截的示例
Oct 23 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
Nov 05 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 字符串中的\n换行符无效、不能换行的解决方法
2014/04/02 PHP
浅谈PHP安全防护之Web攻击
2017/01/03 PHP
PHP基于迭代实现文件夹复制、删除、查看大小等操作的方法
2017/08/11 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
原型方法的不同写法居然会影响调试的解决方法
2007/03/08 Javascript
比较详细的关于javascript中void(0)的具体含义解释
2007/08/02 Javascript
jquery tab插件制作实现代码
2010/06/22 Javascript
window.requestAnimationFrame是什么意思,怎么用
2013/01/13 Javascript
JQuery中两个ul标签的li互相移动实现方法
2015/05/18 Javascript
基于BootStrap的图片轮播效果展示实例代码
2016/05/23 Javascript
jQuery实现弹出窗口弹出div层的实例代码
2017/01/09 Javascript
Vue结合SignalR实现前后端实时消息同步
2017/09/19 Javascript
VUE 实现复制内容到剪贴板的两种方法
2019/04/24 Javascript
jquery实现轮播图特效
2020/04/12 jQuery
js实现淘宝浏览商品放大镜功能
2020/10/28 Javascript
java直接调用python脚本的例子
2014/02/16 Python
Python如何判断数独是否合法
2016/09/08 Python
Python生成随机数组的方法小结
2017/04/15 Python
python的socket编程入门
2018/01/29 Python
Python文件操作中进行字符串替换的方法(保存到新文件/当前文件)
2019/06/28 Python
numpy.transpose()实现数组的转置例子
2019/12/02 Python
matplotlib jupyter notebook 图像可视化 plt show操作
2020/04/24 Python
Python3+RIDE+RobotFramework自动化测试框架搭建过程详解
2020/09/23 Python
scrapy与selenium结合爬取数据(爬取动态网站)的示例代码
2020/09/28 Python
Radley英国官网:英国莱德利小狗包
2019/03/21 全球购物
出纳员的岗位职责
2014/02/22 职场文书
迎新晚会主持词
2014/03/24 职场文书
初三学生评语大全
2014/04/24 职场文书
安全资料员岗位职责范本
2014/06/28 职场文书
机关副主任个人四风问题整改措施
2014/09/26 职场文书
社区党务工作总结2015
2015/05/19 职场文书
反四风问题学习心得体会
2016/01/22 职场文书
nginx基于域名,端口,不同IP的虚拟主机设置的实现
2021/03/31 Servers
详解前端任务构建利器Gulp.js使用指南
2021/04/30 Javascript
react合成事件与原生事件的相关理解
2021/05/13 Javascript
vue3使用vuedraggable实现拖拽功能
2022/04/06 Vue.js