<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片预览</title>
<style>
#main {
width: 900px;
height: 600px;
margin: 10px auto 0;
}
#preview_text {
width: 900px;
height: 40px;
}
#preview_wrapper {
width: 900px;
height: 500px;
border: 1px solid gray;
}
</style>
</head>
<body>
<div id="main">
<div id="preview_text" class="preview_text">
选择文件 : <input type="file" name="imageFile" id="imageFile" onChange="toShowPic()" />
文件名 : <input type="text" name="fileName" id="fileName" value="" />
</div>
<div id="preview_wrapper">
<img id="preview" src="image/blank.gif" /><br /><!-- 图片占位符 -->
</div>
</div>
</body>
<script>
var DIV_ID = "preview";
var PREVIEW_ID = "preview_wrapper";
var PIC_WIDTH = 900;
var PIC_HEIGHT = 500;
var FILE_NAME = "fileName";
var IMAGE_FILE = "imageFile";
function $$(id) {
return document.getElementById(id);
}
function toShowPic() {
doPreview();
setImageName();
}
function setImageName() {
var name = $$(IMAGE_FILE).value;
$$(FILE_NAME).value = name.substring(name.lastIndexOf('\\') + 1, name.lastIndexOf("."));
}
function doPreview() {
var sender = $$(IMAGE_FILE);
var allowExtention = ".jpg,.bmp,.gif,.png";
var extention = sender.value.substring(sender.value.lastIndexOf(".") + 1).toLowerCase();
var browserVersion = window.navigator.userAgent.toUpperCase();
if (allowExtention.indexOf(extention) != -1) {
if (browserVersion.indexOf("MSIE") > -1) {
if (browserVersion.indexOf("MSIE 6.0") > -1) {
$$(DIV_ID).setAttribute("src", sender.value);
} else {
sender.select();
var newPreview = $$(PREVIEW_ID + "New");
if (newPreview == null) {
newPreview = document.createElement("div");
newPreview.setAttribute("id", PREVIEW_ID + "New");
newPreview.style.width = PIC_WIDTH;
newPreview.style.height = PIC_HEIGHT;
newPreview.style.border = "solid 1px gray";
}
newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + document.selection.createRange().text + "')";
var tempDivPreview = $$(PREVIEW_ID);
tempDivPreview.parentNode.insertBefore(newPreview, tempDivPreview);
tempDivPreview.style.display = "none";
}
} else if (browserVersion.indexOf("FIREFOX") > -1) {
var firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);
if (firefoxVersion < 7) {
$$(PREVIEW_ID).setAttribute("src", sender.files[0].getAsDataURL());
} else {
$$(DIV_ID).setAttribute("src", window.URL.createObjectURL(sender.files[0]));
}
} else if (sender.files) {
if (typeof FileReader != "undefined") {
var reader = new FileReader();
reader.onload = function (e) {
$$(DIV_ID).setAttribute("src", e.target.result);
$$(DIV_ID).setAttribute("width", PIC_WIDTH);
$$(DIV_ID).setAttribute("height", PIC_HEIGHT);
};
reader.readAsDataURL(sender.files[0]);
} else if (browserVersion.indexOf("SAFARI") > -1) {
alert("暂时不支持Safari浏览器!");
}
} else {
$$(PREVIEW_ID).setAttribute("src", sender.value);
}
} else {
sender.value = "";
$$(FILE_NAME).value = "";
alert("仅支持以" + allowExtention + "为后缀的文件!");
if (browserVersion.indexOf("MSIE") > -1) {
sender.select();
document.selection.clear();
}
sender.outerHTML = sender.outerHTML;
}
}
</script>
</html>