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学习笔记(十五) js间歇调用和超时调用
Jun 20 Javascript
js读写(删除)Cookie实例详解
Apr 17 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
Aug 09 Javascript
jquery实现树形二级菜单实例代码
Nov 20 Javascript
JQuery右键菜单插件ContextMenu使用指南
Dec 19 Javascript
JS实现往下不断流动网页背景的方法
Feb 27 Javascript
js 获取图像缩放后的实际宽高,位置等信息
Mar 07 Javascript
JavaScript实现图片无缝滚动效果
Jul 07 Javascript
jfinal与bootstrap的登出实战详解
Nov 27 Javascript
element-ui上传一张图片后隐藏上传按钮功能
May 22 Javascript
webpack4 SplitChunks实现代码分隔详解
May 23 Javascript
javascript实现页面的实时时钟显示示例
Aug 06 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
正义联盟的终局之战《天启星战争》将成为DC动画宇宙的最后一部
2020/04/09 欧美动漫
php生成网页桌面快捷方式
2017/05/05 PHP
Nginx实现反向代理
2017/09/20 Servers
PHP生成加减算法方式的验证码实例
2018/03/12 PHP
laravel执行php artisan migrate报错的解决方法
2019/10/09 PHP
使用javascript访问XML数据的实例
2006/12/27 Javascript
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
2011/07/10 Javascript
基于jquery的拖动布局插件
2011/11/25 Javascript
删除Javascript Object中间的key
2014/11/18 Javascript
JavaScript实现在页面间传值的方法
2015/04/07 Javascript
如何防止JavaScript自动插入分号
2015/11/05 Javascript
bootstrap实现弹窗和拖动效果
2016/01/03 Javascript
前端js弹出框组件使用方法
2020/08/24 Javascript
Javascript同时声明一连串(多个)变量的方法
2017/01/23 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
2017/07/09 Javascript
React组件重构之嵌套+继承及高阶组件详解
2018/07/19 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
2018/09/04 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
2019/01/03 Javascript
javascript实现点亮灯泡特效示例
2019/10/15 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
2019/11/12 Javascript
OpenLayers3实现图层控件功能
2020/09/25 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
2020/10/14 Javascript
[01:32]TI珍贵瞬间系列(一)
2020/08/26 DOTA
Python 字符串操作(string替换、删除、截取、复制、连接、比较、查找、包含、大小写转换、分割等)
2018/03/19 Python
Django读取Mysql数据并显示在前端的实例
2018/05/27 Python
python寻找list中最大值、最小值并返回其所在位置的方法
2018/06/27 Python
对Python 数组的切片操作详解
2018/07/02 Python
Python完全识别验证码自动登录实例详解
2019/11/24 Python
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
2013/01/30 HTML / CSS
优秀老师事迹材料
2014/02/05 职场文书
大学生社会实践方案
2014/05/11 职场文书
环保建议书300字
2014/05/14 职场文书
辞职信如何写
2015/02/27 职场文书
公安机关起诉意见书
2015/05/20 职场文书
幼儿园2016年感恩节活动总结
2016/04/01 职场文书
html网页引入svg图片的4种方式
2022/08/05 HTML / CSS