<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="JavaScript" type="text/javascript">
function show_upload(){
document.getElementById("div_upload").style.display = "block"; // 显示上传头像部分
document.getElementById("input_show_upload").value = "关闭上传头像"; // 更改按钮文字
document.getElementById("input_show_upload").onclick = hide_upload; // 绑定onclick事件
}
function hide_upload(){
document.getElementById("div_upload").style.display = "none"; // 隐藏上传头像部分
document.getElementById("input_show_upload").value = "我要上传头像"; // 更改按钮文字
document.getElementById("input_show_upload").onclick = show_upload; // 绑定onclick事件
}
function upload_image_preview(){
var img_path = document.getElementById("input_image_file").value;
// 通过后缀名判断，如果选择的文件不是图片那么终止执行
if(!img_path.match(/\.(jpg|gif|tif|png)$/i))return;
// 载入图片
document.getElementById("span_image_preview").innerHTML = "<img height=\"50px\" src=\"" + img_path + "\">";
}
</script>
</script>
</head><body>
<input id="input_show_upload" type="button" onClick="show_upload();" value="我要上传头像"><br>
<div id="div_upload" style="display:none">
请选取头像文件：<input id="input_image_file" type="file" onChange="upload_image_preview();"><br>
头像预览：<span id="span_image_preview"></span>
</div>
</body>
</html> |
注册 登录
