上传图片限制大小、类型判断、像素判断

时间：2022-08-28 12:06:40

<input type = file/>上传图片限制大小、类型判断、像素判断

在项目中经常用到input标签来上传文件，而这些文件通常是图片文件。图片有很多格式我们只需要其中的几种，就需要对用户上传的文件进行验证，在HTML5中有一个新的属性：accept文件类型限制。但是通常我们会用javascript或jQuery编写方法进行验证图片的大小限制、类型判断、像素判断

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            //图片类型验证
            function verificationPicFile(file) {
                var fileTypes = [".jpg", ".png"];
                var filePath = file.value;
                //当括号里面的值为0、空字符、false 、null 、undefined的时候就相当于false
                if(filePath){
                    var isNext = false;
                    var fileEnd = filePath.substring(filePath.indexOf("."));
                    for (var i = 0; i < fileTypes.length; i++) {
                        if (fileTypes[i] == fileEnd) {
                            isNext = true;
                            break;
                        }
                    }
                    if (!isNext){
                        alert('不接受此文件类型');
                        file.value = "";
                        return false;
                    }
                }else {
                    return false;
                }
                 var fileSize = 0;
                var fileMaxSize = 1024;//1M
                var filePath = file.value;
                if(filePath){
                    fileSize =file.files[0].size;
                    var size = fileSize / 1024;
                    if (size > fileMaxSize) {
                        alert("文件大小不能大于1M！");
                        file.value = "";
                        return false;
                    }else if (size <= 0) {
                        alert("文件大小不能为0M！");
                        file.value = "";
                        return false;
                    }
                }else{
                    return false;
                }
            }
//            //图片大小验证
//            function verificationPicFile(file) {
//                var fileSize = 0;
//                var fileMaxSize = 1024;//1M
//                var filePath = file.value;
//                if(filePath){
//                    fileSize =file.files[0].size;
//                    var size = fileSize / 1024;
//                    if (size > fileMaxSize) {
//                        alert("文件大小不能大于1M！");
//                        file.value = "";
//                        return false;
//                    }else if (size <= 0) {
//                        alert("文件大小不能为0M！");
//                        file.value = "";
//                        return false;
//                    }
//                }else{
//                    return false;
//                }
//            }
//图片尺寸验证
//function verificationPicFile(file) {
//  var filePath = file.value;
//  if(filePath){
//      //读取图片数据
//      var filePic = file.files[0];
//      var reader = new FileReader();
//      reader.onload = function (e) {
//          var data = e.target.result;
//          //加载图片获取图片真实宽度和高度
//          var image = new Image();
//          image.onload=function(){
//              var width = image.width;
//              var height = image.height;
//              if (width == 720 | height == 1280){
//                  alert("文件尺寸符合！");
//              }else {
//                  alert("文件尺寸应为：720*1280！");
//                  file.value = "";
//                  return false;
//              }
//          };
//          image.src= data;
//      };
//      reader.readAsDataURL(filePic);
//  }else{
//      return false;
//  }
//}
        </script>
    </head>
    <body>
        <input type="file" name="files" id="file" onchange="verificationPicFile(this)">
    </body>
</html>

 

标签：

相关文章