JS验证图片格式和大小并预览

时间：2023-03-09 05:46:13
JS验证图片格式和大小并预览

用于上传图片的js验证：

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>图片效验</title>

</head>

<script type="text/javascript" src="../../js/jquery-1.8.3.js"></script>

<script type="text/javascript">

    /*

     *图片验证

     */

    function photoCheck(obj){

        var ff = $("#photoSrc").val();

        if(ff == null || ff == ""){

            alert("请选择文件");

            return;

        }else if(!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(ff)){

            alert("图片类型必须是.gif,jpeg,jpg,png中的一种");

            return;

        }

        photo_flag = true;

        //设置限制图像的大小为10MB，这里你可以自己设置

        var fSize = 1024 * 1024 *10;

        //限制图片宽高

        var fHeight = 3000;

        var fWidth = 3000;

        var fileType;

        var fileSize;

        var filePath;

        var img = new Image();

        //显示图片

        if (obj.files) {

            //用来把文件读入内存，并且读取文件中的数据，要注意的是只有 Firefox 3.6+ 和 Chrome 6.0+ 实现了 FileReader 接口。

            var reader = new FileReader();

            //获取文件的对像

            var thisFile = obj.files[0];

            //获取上传文件的类型，一般来说，如果类型是image/jpeg,.jpg,.gif等等图片格式的话就是合理的

            fileType = thisFile.type;

            //获取当前上传的文件的大小

            fileSize=thisFile.size;

            /*readAsDataURL：该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URI，Data URI是一种将小

            文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件*/

            reader.readAsDataURL(thisFile);

            //文件读取成功完成时触发

            reader.onloadend = function(event){

                // 图像的路径

                img.src = event.target.result;

                // 图片加载完毕后

                img.onload = function(event) {

                    //效验图片规格

                    specification(img);

                    filePath = this.src;

                    if(photo_flag){

                        //设置图片为当前上传的图片路径

                        $("#imgShow").attr("src", filePath);

                    }else{

                        //否则设置默认的图片

                        $("#imgShow").attr("src", "default.jpg");

                    }

                }

            }

        }else{// 如果是ie浏览器

            //选择当前全部文本内容

            obj.select();

            /*

                为选择的内容创建一个Range对象，在.text转换成文本

                什么是Range？https://my.oschina.net/122612475/blog/286302

                所谓"Range"，是指HTML文档中任意一段内容。一个Range的起始点和结束点位置任意，甚至起始点和结束点可

                以是一样的（也就是空Range）。最常见的Range是用户文本选择范围(user text selection)。当用户选择了

                页面上的某一段文字后，你就可以把这个选择转为Range。当然，你也可以直接用程序定义Range

             */

            var path = document.selection.createRange().text;

            img.src = path;

              //效验图片规格

            specification(img);

              //取出文件后缀

            var fileType = path.substring(path.length-4,path.length);

            if(img.readyState == "complete") {

                //图片加载完毕,获取图片的大小

                fileSize = img.fileSize;

            }else{

                //当的该对象的 load state 改变时，会触发此事件

                img.onreadystatechange = function(){

                    // 当图片load完毕

                     if(img.readyState=='complete'){

                         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" &&

                 fileType != ".png" && fileType != ".PNG" && fileType != "image/png"  &&

                 fileType != ".gif" && fileType != ".GIF" && fileType != "image/gif"

           ){

              alert("图片类型必须是.gif,jpeg,jpg,png中的一种");

             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");

         }

         // 匿名函数:效验图片规格

         var specification = function(image){

             if(image.width >= fWidth || image.height >= fHeight){

                 alert("*提示：文件大小不对。您只能上传小于等于"+fWidth+"*"+fHeight+"尺寸的图片");

                 $("#imgShow").attr("src", "default.jpg");

                 return;

             }

         }

    }

</script>

<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 ，否则即是读取的结果，绝大多数的程序都会在成功读取文件的时候，抓取这个值。

本文参考：喜youngyoung

相关文章