app直播原始碼,js實現上傳圖片型別+大小+尺寸驗證

zhibo系統開發發表於2022-12-08

app直播原始碼,js實現上傳圖片型別+大小+尺寸驗證

html程式碼:

<input type="file" name="files" id="file" >


js程式碼:

//圖片型別驗證
function verificationPicFile(file) {
console.log(111)
    var fileTypes = [".jpg", ".png"];
    var filePath = file.value;
    //當括號裡面的值為0、空字元、false 、null 、undefined的時候就相當於false
    if(filePath){
    console.log(222)
        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){
        console.log(444)
            alert('不接受此檔案型別');
            file.value = "";
            return false;
        }
    }else {
        return false;
    }
}
//圖片大小驗證
function verificationPicFile(file) {
console.log(555)
    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) {
console.log(666)
  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;
    }
}


 以上就是 app直播原始碼,js實現上傳圖片型別+大小+尺寸驗證,更多內容歡迎關注之後的文章


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69978258/viewspace-2927315/,如需轉載,請註明出處,否則將追究法律責任。

相關文章