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

最新推荐文章于 2024-01-09 16:29:15 发布

ahe87275

最新推荐文章于 2024-01-09 16:29:15 发布

阅读量146

点赞数

文章标签： javascript 后端 ViewUI

原文链接：http://www.cnblogs.com/xiyoungyoung/archive/2012/12/03/2800379.html

版权

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

转载于:https://www.cnblogs.com/xiyoungyoung/archive/2012/12/03/2800379.html

ahe87275

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js验证图片格式和大小并预览

function photoCheck(obj){ var ff = $("#photoSrc").val(); if(ff == null || ff == ""){ return; } photo_flag = true; var fSize = 50.9 * 10...
复制链接

扫一扫