我们通过动态的创建iframe,修改form的target,来实现无跳转的文件上传。
 
具体的实现步骤
1.捕捉表单提交事件
2.创建一个iframe
3.修改表单的target,指向iframe
4.删除iframe
 
file.html代码如下:
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="upfile.php" method="post" id="upfileForm" enctype="multipart/form-data">
<input type="file" name="file" />
<input type="submit" name="submit" value="上传" />
</form>
<div id="result"></div>
</body>
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
$("#upfileForm").bind("submit", function() {
var ifrName = 'upfile' + Math.random();
var ifr = $("<iframe name='" + ifrName + "' width='0' height='0' frameborder='0'></iframe>");
$("body").append(ifr);
$(this).attr("target", ifrName);
});
</script>
</html>

upfile.php代码如下:

<?php
$uploadDir = './upload/';
if(!file_exists($uploadDir)) {
@mkdir($uploadDir, 0777, true);
}
$uploadFile = $uploadDir . basename($_FILES['file']['name']);
if(move_uploaded_file($_FILES['file']['tmp_name'], $uploadFile)) {
echo "<script>parent.document.getElementById('result').innerHTML='OK';</script>";
} else {
echo "<script>parent.document.getElementById('result').innerHTML='NO';</script>";
}
 

php iframe 上传文件的更多相关文章

  1. 用iFrame模拟Ajax上传文件

    前段时间在解决ajax上传文件时折腾了好一阵.直接用$.post上传文本信息肯定是没有问题的.但是$.post直接上传图片是不可行的. 后来看到网上的一些解决方案,有现成的ajax上传文件的封装的方法 ...

  2. 原生XMLHTTPResponse,jQuery-Ajax 上传文件;iframe上传图片&预览;图片验证码小案例

    原生AJAX Ajax主要就是使用 [XmlHttpRequest]对象来完成请求的操作,该对象在主流浏览器中均存在(除早起的IE),Ajax首次出现IE5.5中存在(ActiveX控件) 1.Xml ...

  3. 前端之web上传文件的方式

    前端之web上传文件的方式 本节内容 web上传文件方式介绍 form上传文件 原生js实现ajax上传文件 jquery实现ajax上传文件 form+iframe构造请求上传文件 1. web上传 ...

  4. 那些年,我们在Django web开发中踩过的坑(一)——神奇的‘/’与ajax+iframe上传

    一.上传图片并在前端展示 为了避免前端整体刷新,我们采用ajax+iframe(兼容所有浏览器)上传,这样用户上传之后就可以立即看到图片: 上传前: 上传后: 前端部分html: <form s ...

  5. 第九篇:web之前端之web上传文件的方式

    前端之web上传文件的方式   前端之web上传文件的方式 本节内容 web上传文件方式介绍 form上传文件 原生js实现ajax上传文件 jquery实现ajax上传文件 form+iframe构 ...

  6. FormData上传文件 带进度条

    * jQuery ajax  FormData 上传文件 template $.ajax({ url: url, type: 'POST', data: new FormData(form), dat ...

  7. 三种上传文件不刷新页面的方法讨论:iframe/FormData/FileReader

    发请求有两种方式,一种是用ajax,另一种是用form提交,默认的form提交如果不做处理的话,会使页面重定向.以一个简单的demo做说明: html如下所示,请求的路径action为"up ...

  8. .net MVC借助Iframe实现无刷新上传文件

    html: <div id="uploadwindow" style="display: none;"> <form action=" ...

  9. form、iframe实现异步上传文件

    转载自:http://blog.csdn.net/sunjing21/article/details/4779321 实现主要功能: 页面提供一个上传图片的input file选择框,用于上传某一类型 ...

随机推荐

  1. 032:基于Consul和MGR的MySQL高可用架构

    目录 一.Consul 1.Consul简介 2.准备环境 3.Consul 安装 4.Consul配置文件 5.Consul 服务检查脚本 6.Consul启动 二.MGR搭建 1.MGR配置 2. ...

  2. 【Unix网络编程】chapter2传输层:TCP,UDP和SCTP

    2.1 概述 TCP:复杂,可靠的字节流协议 UDP:简单的,不可靠的数据包协议 SCTP:流控制传输协议 2.2 总图 2.3 用户数据报协议2.4 传输控制协议2.5 流控制传输协议(SCTP)2 ...

  3. 理解prototype

    从别人的博客里面盗了2张图,这2张图将对象/实例/prototype/__proto__/constructor之间的关系描绘的很清楚. 1.prototype 为 function的属性,实例化的对 ...

  4. 腾讯优图联手Science发布主题报告:计算机视觉的研发和应用

    近日,腾讯优图与<科学>(Science)杂志共同发布<Seeing is believing: R&D applications of computer vision> ...

  5. relocation error: /usr/lib64/libc.so.6: symbol _dl_starting_up, version GLIBC_PRIVATE not defined in file ld-linux-x86-64.so.2 with link time reference 问题解决

    在建立一个错误的软连接到ld-linux-x86-64.so.2时,悲剧就这么发生了.此时大部分命令都不能使用,SSH当然也不能登录了.这个时候一定不要退出终端. 有人说那就把软连接复原吧,可是ln也 ...

  6. 模板方法模式( TemplateMethod)

    定义一个操作中的算法的骨架,而将一些步骤延迟到子类中,模板方法使得子类可以不改变一个算法的结构即可重新定义该算法的某些特定步骤. AbstractClass 是抽象类,其实也是一个抽象模板,定义并实现 ...

  7. 代码生成器 CodeSmith 的使用(一)

    由于在项目中经常要会用到数据库的 CRUD 操作(增.删.改.查),而且还使用的是orm 框架将数据库表名和表中的的字段映射成相应的类属性.如果把大量的时间用到手工输入数据库表中的字段,除了能练习打字 ...

  8. 杂: PYTHON上数据储存:推荐h5py

    一篇很短的小短文,主要推荐下做科学计算是大量数据的储存问题 最近在做一个CNN的项目,文件夹里有20w张图片要读入并保存到一个data文件(不然每次都读20w文件太麻烦). 折腾了一个下午,发现了一个 ...

  9. 20165233 2017-2018-2 《Java程序设计》第八周学习总结

    20165233 2017-2018-2 <Java程序设计>第八周学习总结 教材学习内容总结 基础:Java中的线程,Thread类与线程的创建 - 线程是比进程更小的单位. - JVM ...

  10. 动态html处理和及其图像识别

    爬虫(Spider),反爬虫(Anti-Spider),反反爬虫(Anti-Anti-Spider) 之间恢宏壮阔的斗争... Day 1 小莫想要某站上所有的电影,写了标准的爬虫(基于HttpCli ...