<script type="text/javascript">
var flag = 0;
/**
* 校验表单
*/
function checkForm(){
var idcard =document.getElementById("servertypename").value;
var fileName = $('#uploadPath').val();
var check_flag = false;
if(idcard==""){
alert("类型名称不能为空!");
}else if(fileName==""){
alert("请上传图标!");
}else {
if(flag==1)
alert("您只能输入GIF,BMP,PNG,JPG,JPEG格式的文件");
else if(flag==2)
alert("请上传尺寸为120*120的图片!");
else
check_flag = true;
}
return check_flag;
};
/**
* 预览图片
*/
function previewImage(file, url) {
var MAXWIDTH = 120;
var MAXHEIGHT = 120;
if (file.files && file.files[0]) {
var img = document.getElementById(url);
img.onload = function() {
var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
img.width = rect.width;
img.height = rect.height;
img.style.marginTop = rect.top + 'px';
};
var reader = new FileReader();
reader.onload = function(evt) {
img.src = evt.target.result;
};
reader.readAsDataURL(file.files[0]);
} else {
file.select();
}
getImageSize(document.getElementById("uploadPath"));
};
/**
* 压缩图片
*/
function clacImgZoomParam(maxWidth, maxHeight, width, height) {
var param = {
width: width,
height: height
};
if (width > maxWidth || height > maxHeight) {
rateWidth = width / maxWidth;
rateHeight = height / maxHeight;
if (rateWidth > rateHeight) {
param.width = maxWidth;
param.height = Math.round(height / rateWidth);
} else {
param.width = Math.round(width / rateHeight);
param.height = maxHeight;
}
}
return param;
};
/**
* 校验图片尺寸
*/
function getImageSize(obj) {
var _file = document.getElementById("uploadPath");
var i = _file.value.lastIndexOf('.');
var len = _file.value.length;
var extEndName = _file.value.substring(i + 1, len);
var extName = "GIF,BMP,PNG,JPG,JPEG";
if (extName.indexOf(extEndName.toUpperCase()) == -1) {
alert("您只能输入" + extName + "格式的文件");
flag = 1;
} else {
var url, image;
if (obj.files) {
if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
obj.select();
url = document.selection.createRange().text;
}
url = window.URL.createObjectURL(obj.files[0]);
} else {
url = obj.value;
url = "file:///" + url;
}
image = new Image();
image.src = url;
image.onload = function() {
if (image.width != 120 || image.height != 120) {
alert("请上传尺寸为120*120的图片!");
flag = 2;
}else{
flag = 0;
}
};
}
};
</script>
预览图片及上传按钮:
<img src="<%=path%>/images/alum_def_img.jpg" name="img" id="img" width="60px;" height="60px;" align="center" style="margin-top: 5px; margin-bottom: 5px;"/>
<input type="file" class="file" id="uploadPath" name="uploadPath" accept="image/gif,image/png,image/bmp,image/jpeg" οnchange="previewImage(this,'img')" />
提交表单:
<input type="submit" name="submit" οnclick="javascript:return checkForm();" value="提交" style="font-size:16px;width:45px;height:28px;background:#aae3fc;" />