首页 > 代码库 > 文件和打印的技巧-上传图片以后显示缩略图
文件和打印的技巧-上传图片以后显示缩略图
————————————————————————
<body style="text-align:center">
<div id="demo"></div>
<form action="./upload.html" target="tgt_frame" method="post"
enctype="multipart/form-data" name="myform">
<label>
<input type="file" name="mypic" />
</label>
<label>
<input type="submit" name="Submit" value="http://www.mamicode.com/提交"/>
</label>
</form>
<iframe id="tgt_frame" name="tgt_frame" style="display:none;"></iframe>
</body>
————————————————————————
upload.html :
<!DOCTYPE html>
<html>
<head>
<title>upload</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript">
function init(){
//获取顶层网页的demo元素，并动态加载一张图片
top.document.getElementById(‘demo‘).innerHTML
= ‘<img src="http://www.mamicode.com//1.jpg"/>‘;
}
</script>
</head>
<body style="text-align:center" onl oad="init();">
</body>
</html>
————————————————————————————难点剖析：
1.把表单提交的目标指向一个框架，而不是当前网页，这样可以避免网页的刷新。
2.这个提交网页的框架不能被用户看见，因此本例使用css属性把它隐藏起来
其他说明：
实例中的opload.html只是一个静态网页，它并没有接受来自客户端的文件流，在实际开发中，其一定是一个动态网页，或者以.php、.jsp、.aspx等结尾的URL
文件和打印的技巧-上传图片以后显示缩略图