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