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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 上傳圖片限制大小、類型判斷、像素判斷關於input type=file 限制文件上傳類型 input type='file'限制上傳文件類型判斷input[type=file]上傳文件格式 input[type=file]上傳文件（格式判斷、文件大小、上傳成功后操作） JavaScript input type=file 獲取文件大小及類型限制 elementui文件（圖片）上傳組件對圖片大小和類型進行判斷限制 jq判斷上傳圖片的大小和類型 jquery判斷 input type="file"上傳文件是否為空 type=file 上傳圖片限制類型和尺寸方法