图片预览：
上传图片时的预览实现，支持各浏览器。
原理比较简单，下面是简单的代码实现：
<!--
Created by IntelliJ IDEA.
User: 张国明 guomingzhang2008.com
Date: 12-11-26
Time: 15:08:36
个人头像上传
-->
<html>
<head>
<meta content="text/html" charset="utf-8">
<title>本地图片预览</title>
<head>
<script src="jquery1.7.min.js"></script>
<script type="text/javascript">
/**
* 本地预览
* @param inputFile 读入的文件对象
*/
function readURL(inputFile) {
var Browser_Name = navigator.appName;
var is_IE = (Browser_Name == "Microsoft Internet Explorer");//判读是否为ie浏览器
if (is_IE) {
// IE浏览器 直接获取文件的路径值
$("#preViewImg").attr("src", "file:///" + $("#file").val());
} else {
// 非IE浏览器 使用HTML5的方式获取文件浏览框中的文件
if (inputFile.files && inputFile.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#preViewImg').attr('src', e.target.result);
};
reader.readAsDataURL(inputFile.files[0]);
}
}
}
/**
* 上传时的验证
*/
function uploadValidate() {
if ($('#file').val() == "") {
alert("请选择您要上传的图片！");
return;
}
//校验文件格式
if(!/^.*?\.(jpg|JPG)$/.test($("#file").val().toLowerCase())){
alert("只能上传jpg、JPG格式的文件！");
return;
}
alert("提交成功");
}
</script>
</head>
<body>
<div style="margin-left: 80px; width: 100px; height: 123px; padding: 2px; background-color: #dfdfdf; border: 1px solid #f0f0f0;">
<!-- 预览图片，这里将图片的大小设置成固定的了。 -->
<img id="preViewImg" width="99" height="122" src="no_pic.png">
</div>
<div style="margin-left: 70px; font-size: 12px;">(建议尺寸 100 * 120)</div>
<form id="editForm" method="post" action="" enctype="multipart/form-data">
<input id="file" type="file" name="file" onchange="readURL(this);"/>
<input type="button" value="上传" onclick="uploadValidate();">
</form>
</body>
</html>
