无刷新假象 实现简易文件上传
传统的上传文件功能,点击“上传”后页面会短暂地空白,等待服务器的响应;为了提高网站的处理效率,采用模拟Ajax的无刷新假象技术,我们可以让页面在局部刷新的情况下,实现文件上传。
demo.html
<script type="text/javascript"> function callback(filename){ //"$()"是封装在单独js文件中的函数:document.getElementById(id) $(‘photo‘).style.display = "none"; $(‘submit‘).style.display = "none"; $(‘msg‘).innerHTML = filename; } </script>
<body> <!--target="frm" 此时请求后台处理的不是body框架,而是iframe框架;后台输出的内容也都输出到frm--> <form method="post" enctype="multipart/form-data" target="frm" action="upload.php"> 照片:<input type="file" name="photo" id="photo"/> <input type="submit" id="submit" name="submit" value="上传文件"/><br/> </form> <iframe name="frm" style="display:none"></iframe><br/><!--进行模拟刷新的二级框架--> <span id="msg"></span> </body>
upload.php
//文件上传 if (!empty($_POST[‘submit‘])){ $extname = strrchr($_FILES[‘photo‘][‘name‘],‘.‘); $filename = time().$extname; $file = $_FILES[‘photo‘][‘tmp_name‘]; copy($file,‘upload/‘.$filename); echo "<script>parent.callback(‘$filename‘);</script>";
流程解释
Browser选择完要上传的文件后,点击上传文件按钮,此时body(一级框架)没有如愿将此文件提交到action="upload.php",而是target="frm"对应的iframe框架来提交;iframe是次于body框架的二级框架,由二级框架iframe发出上传请求,将文件上传给action="upload.php";在上面的html代码当中,iframe框架style="display:none",为了页面美观,我们是看不见的,如果你想看到,就设为“block”。此时页面其实有刷新,但不是整个body刷新,而是二级框架iframe刷新,由于iframe是隐藏的,而且真正的iframe默认的页面面积是很小的,导致我们认为页面是无刷新的,假象就此出现了。
echo "<script>parent.callback();</script>";
前台等待后台的响应,后台返还js脚本调用前台一级框架的callback()函数。注意,如果没有"parent"对象,返还的js脚本就要在iframe里面执行,而我们想要js脚本在body里面执行,那么想法就成立了;还有一点,有没有发现,“上传文件、返还js脚本”这两个动作的承受者都iframe,而不是body,而且程序的执行是这样的body<=>iframe<=>upload,iframe完全是作为中间受众来体现他的价值。
callback(filename)函数接收后台传递过来的图片文件名后,主要做了两件事,隐藏上传文件的路径框、显示上传成功的图片名称。
本文出自 “做一只蜗牛真好” 博客,请务必保留此出处http://smili.blog.51cto.com/8919945/1562420
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。