文件和打印的技巧-上传图片以后显示缩略图
Posted 承载梦想-韩旭明
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了文件和打印的技巧-上传图片以后显示缩略图相关的知识，希望对你有一定的参考价值。
————————————————————————
<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="提交"/>
</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=".//1.jpg"/>‘;
}
</script>
</head>
<body style="text-align:center" onload="init();">
</body>
</html>
————————————————————————————难点剖析：
1.把表单提交的目标指向一个框架，而不是当前网页，这样可以避免网页的刷新。
2.这个提交网页的框架不能被用户看见，因此本例使用css属性把它隐藏起来
其他说明：
实例中的opload.html只是一个静态网页，它并没有接受来自客户端的文件流，在实际开发中，其一定是一个动态网页，或者以.php、.jsp、.aspx等结尾的URL
以上是关于文件和打印的技巧-上传图片以后显示缩略图的主要内容，如果未能解决你的问题，请参考以下文章