无刷新假象 实现简易文件上传
传统的上传文件功能，点击“上传”后页面会短暂地空白，等待服务器的响应；为了提高网站的处理效率，采用模拟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)函数接收后台传递过来的图片文件名后，主要做了两件事，隐藏上传文件的路径框、显示上传成功的图片名称。
转载于:https://blog.51cto.com/smili/1562420
无刷新假象 实现简易文件上传相关推荐
- uploader.lib php,Fine Uploader文件上传组件应用介绍
最近在处理后台数据时需要实现文件上传.考虑到对浏览器适配上采用Fine Uploader. Fine Uploader 采用ajax方式实现对文件上传.同时在浏览器中直接支持文件拖拽[对浏览器版本有要 ...
- 真得好好细讲文件上传，否则漏洞百出
一.表单 1,上传文件的表单使用post方式:还要加上enctype='multipart/form-data'. 2,一般要加上隐藏域:<input type=hidden nam ...
- 简单的php文件_简单的php文件上传（实例）
把下面代码另存为uploads.php 简易文件上传 请选择文件: function file_list($dir,$pattern=""){ $arr=array(); $dir ...
- ajax异步文件上传和进度条
一.ajax异步文件上传 之前有说过在form表单内的文件上传,但是会刷新页面,下面就来实现不刷新页面的异步文件上传 <div class="uploding_div"> ...
- 实用ExtJS教程100例-009：ExtJS Form无刷新文件上传
文件上传在Web程序开发中必不可少,ExtJS Form中有一个filefield字段,用来选择文件并上传.今天我们来演示一下如何通过filefield实现ExtJS Form无刷新的文件上传. 首先 ...
- [转]仿163网盘无刷新文件上传系统
原文链接:http://www.cnblogs.com/cloudgamer/archive/2008/10/20/1314766.html 这个仿163网盘无刷新文件上传系统,并没有用使用.net的 ...
- Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现)
相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦苦来实现呢?我并不否认"拿来主义",只是我个人 ...
- 文件上传之二利用frame实现无页面刷新的文件上传
在上一篇文章中是将文件随表单中其他数据一起提交的,这样在提交一个表单时需要较长的时间,用户体验不是很好.一般网站选择将文件与表单的其他数据分开而单独上传.本文介绍如何利用iframe标签将上传文件模块 ...
- 简便无刷新文件上传系统
兼容:ie6/7/8, firefox 3.5.5, opera 10.01, safari 4.0.3, chrome 3.0 效果预览 文件上传 选择文件 重命名 操作 状态 重置 选择文件 ...
- Javascrpt无刷新文件上传
最近工作中遇到上传文件问题,主要需求是一步点击上传,兼容ie8+,当时用的dojox/form/uploader控件,这两天扒了一下源码,明白了原理拿出来分享一下. 总体思路如下: 1.对于支持XML ...
最新文章
- 参考基因组中的特殊序列
- Button单击事件处理:
- TCP-IP详解：重传机制
- Spring Data JPA中文文档[1.4.3] PDF
- WPF中设置ListView的Items颜色交替显示
- mysql 远程服务器返回错误404_远程服务器返回异常: (404) 未找到
- 全栈深度学习第7期: 研究方向这么多，哪些是有有趣又潜力的呢？
- mysql性能优化学习_mysql学习——性能优化之sql优化
- FTP服务器搭建及操作（一）
- Pronunciation Difference between /ʌ/ and /ɑ/
- php网站 小偷源代码
- 过程能力指数Cp与Cpk计算公式
- 嵌入式操作系统-ucos是什么?
- java groovy 表达式_Groovy的基础语法
- SpringSecurity--记住我
- 笔记本连接显示器后没有声音_笔记本外接显示器后没声音怎么回事
- 微软又犯二了！WebApi中不支持MVC的OutputCache
- 深度学习中滑动平均模型的作用、计算方法及tensorflow代码示例
- C# 数字转汉字(一二三)
- 接受-拒绝采样算法详细证明