<html>
<head><title>text</title>
<script type="text/javascript">
var picPath;
var image;
var box;
function LoadImage(ele, show_pos_obj) {
picPath = GetImgPath(ele);
if (picPath != "" && picPath != null) {
image = new Image();
image.src = picPath;
box = GetObj(show_pos_obj);
box.innerHTML = "<span style='color:gray;font-size:11px'>Loading...</span>";
setTimeout(ImgView, 1000);
} else {
return false;
}
}
function ImgView() {
if (image.width == 0 || image.height == 0) {
settimeout(ImgView, 1000);
} else {
if (box != null) {
var imgWidth = (image.width >= box.offsetWidth) ? box.offsetWidth : image.width;
var imgHeight = (image.height >= box.offsetHeight) ? box.offsetHeight : image.height;
var alt = "picture size :" + image.width + " * " + image.height;
box.innerHTML = "<img width='" + imgWidth + "' height='" + imgHeight + "' id='apic' src='" + picPath + "' οnlοad='DrawImage(this," + box.offsetWidth + "," + box.offsetHeight + ")' title=" + alt + " />";
}
}
}
function GetImgPath(obj) {
if (ValidateImgUrl(obj)) {
if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
obj.select();
return document.selection.createRange().text;
}
else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {
if (obj.files) {
return obj.files.item(0).getAsDataURL();
}
return obj.value;
}
return obj.value;
}
}
function ValidateImgUrl(obj) {
var url = GetObj(obj).value;
var filename = url.substring(url.lastIndexOf(".") + 1).toLowerCase();
if (filename != "jpg" && filename != "gif" && filename != "png" && filename != "bmp" && filename != "jpeg") {
alert("Picture format is incorrect, please choose the following format image upload jpg|gif|png|bmp"); return false;
}
if (url.length > 0) {
//return document.getElementById(id).value;
return true;
}
else { return false; }
}
function GetObj(id) {
return "string" == typeof id ? document.getElementById(id) : id;
}
var flag = false;
function DrawImage(ImgD, iwidth, iheight) {
var image = new Image();
image.src = ImgD.src;
if (image.width > 0 && image.height > 0) {
flag = true;
if (image.width / image.height >= iwidth / iheight) {
if (image.width > iwidth) {
ImgD.width = iwidth;
ImgD.height = (image.height * iwidth) / image.width;
} else {
ImgD.width = image.width;
ImgD.height = image.height;
}
} else {
if (image.height > iheight) {
ImgD.height = iheight;
ImgD.width = (image.width * iheight) / image.height;
} else {
ImgD.width = image.width;
ImgD.height = image.height;
}
}
}
}
</script>
</head><body>
<p>Channel Thumbnail: <input type="file" size="78" name="imageFile" οnchange='LoadImage(this,"box")'/></p>
<p>
<div id='box' style="width: 80px; height:80px"></div>
</p>
</body></html>