Extjs4 上傳圖片並進行圖片格式以及大小驗證

 

在做項目是遇到上傳圖片，並在前端限制圖片上傳的大小，下面就直接貼出主要的上傳圖片的代碼，以及圖片大小的驗證，但前端沒有驗證圖片的寬高驗證

一、先創建出上傳圖片的組件，使用filefield組件

var upLoadBox = Ext.create('Ext.form.Panel', {
    height: 100,
    flex: 1,
    bodyPadding: 15,
    border: 0,
    items: [{
        xtype: 'filefield',
        name: 'photo',
        id:'id_fileField_photo',
        labelWidth: 50,
        msgTarget: 'side',
        allowBlank: false,
        anchor: '100%',
        maxLength: 200,
        border: 0,
        buttonText: '選擇圖片',
        Verification: "photo",
        validator: validateCustom,
        regex: null
    }],
    buttons: [{
        text: '上傳',
        handler: function() {
            var form = this.up('form').getForm();
            //上傳圖片時傳遞的參數
            var reqParams = { };
            //驗證from表單輸入是否正確
            if (form.isValid()) {
                //驗證圖片大小
                if(me.IsValidateSize && validateImageSize()){
                    Ext.Msg.alert('提示','圖片太大，請選擇小於'+me.ImageMaxSize+'KB的圖片文件！');
                    return ;
                }

                form.submit({
                    url: 'https://xxxxxx',  //在這里修改為你上傳圖片的路徑
                    params: reqParams,    //這里修改為你上傳圖片時的參數
                    waitMsg: '正在上傳...',
                    success: function(fp, o) {
                        //這里處理上傳圖片成功后的操作
                        var msg = o.response.responseText;
                        if (msg) {
                            Ext.Msg.alert("溫馨提示", msg);
                            return;
                        }
                    },
                    failure: function(proxy, response) {
                        //這里處理上傳圖片失敗的操作
                        response = response.response;
                        if (response.status == 0) {
                            Ext.Msg.alert("溫馨提示", "網絡超時，請重試");
                            return false;
                        }
                        var msg = response.responseText;
                        if (msg) {
                            Ext.Msg.alert("溫馨提示", msg);
                        }
                    }
                });
            }
        }
    }]
});
//窗體
var win = new Ext.Window({
    title: '請您選擇要上傳的圖片',
    name: "winupLoadId",
    width: 476,
    height: 142,
    resizable: false,
    modal: true,
    closable: true,
    items: [upLoadBox]
});
win.show();


//上傳圖片的輸入框格式正則驗證

var regexs["photo"] = /\.jpg$|\.jpeg$|\.png$/i; //圖片格式

var regexsTexts["photo"] = '請選擇格式為“png、jpg、jpeg”的圖片';

function validateCustom(val) {
    if (val != "") {
        var fields = this.Verification;
        var items = fields.split('|');
        for (var i = 0; i < items.length; i++) {
            if (regexs[items[i]]) {
                if (!regexs[items[i]].test(val)) {
                    return regexsTexts[items[i]];
                }
            }
        }
    }
    return true;
}

 

//驗證圖片大小
function validateImageSize(){
    //取控件DOM對象
    var field = document.getElementById('id_fileField_photo');
    //取控件中的input元素
    var inputs = field.getElementsByTagName('input');
    var fileInput = null;
    var il = inputs.length;
    //取出input 類型為file的元素
    for(var i = 0; i < il; i ++){
        if(inputs[i].type == 'file'){
            fileInput = inputs[i];
            break;
        }
    }
    if(fileInput != null){
        var fileSize = getFileSize(fileInput);
        //允許上傳不大於1M的文件
        return fileSize > 1024;
    }
    return false;
},

//計算文件大小，返回文件大小值，單位K
function getFileSize(target) {
    var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
    var fs = 0;
    if (isIE && !target.files) {
        var filePath = target.value;
        var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
        var file = fileSystem.GetFile(filePath);
        fs = file.Size;
    } else if (target.files && target.files.length > 0) {
        fs = target.files[0].size;
    } else {
        fs = 0;
    }
    if (fs > 0) {
        fs = fs / 1024;
    }
    return fs;
}


驗證圖片的格式可以使用下面的方法

//驗證圖片文件的正則 
var img_url_value = '';
var img_reg = /\.([jJ][pP][gG]){1}$|\.([jJ][pP][eE][gG]){1}$|\.([gG][iI][fF]){1}$|\.([pP][nN][gG]){1}$|\.([bB][mM][pP]){1}$/;
if(!img_reg.test(img_url_value)){
    Ext.Msg.alert('提示','文件類型錯誤,請選擇圖片文件(jpe/jpeg/gif/png/bmp)');
}