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)');
}