我们通过动态的创建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. javascript面向对象的程序设计之Object.getOwnPropertyDescriptor()

    Object.getOwnPropertyDescriptor()用于获取给定属性的描述信息,这个描述信息是一个对象. 如果是访问器属性,则这个对象的属性有configurable,enumerabl ...

  2. TensorFlow利用A3C算法训练智能体玩CartPole游戏

    本教程讲解如何使用深度强化学习训练一个可以在 CartPole 游戏中获胜的模型.研究人员使用 tf.keras.OpenAI 训练了一个使用「异步优势动作评价」(Asynchronous Advan ...

  3. 《Linux内核精髓:精通Linux内核必会的75个绝技》一HACK #16 OOM Killer的运行与结构

    HACK #16 OOM Killer的运行与结构(1) 本节介绍OOM Killer的运行与结构. Linux中的Out Of Memory(OOM) Killer功能作为确保内存的最终手段,可以在 ...

  4. solr亿万级索引优化实践(四)

    本篇是这个系类的最后一篇,但优化方案不仅于此,需要后续的研究与学习,本篇主要从schema设计的角度来做一些实践. schema.xml 这个文件的作用是定义索引数据中的域的,包括域名称,域类型,域是 ...

  5. 从最大似然函数 到 EM算法详解

    极大似然算法 本来打算把别人讲的好的博文放在上面的,但是感觉那个适合看着玩,我看过之后感觉懂了,然后实际应用就不会了.... MLP其实就是用来求模型参数的,核心就是“模型已知,求取参数”,模型的意思 ...

  6. ASP.Net在web.config中设置上传文件的大小方法

    修改Webcong文件:<system.web><httpRuntime maxRequestLength="40960"   //即40MB,1KB=1024u ...

  7. Android手机与服务器(案例一) webservice

    1.服务端 建立webservice,增加方法gettime和sum. 测试正常8080端口,关闭防火墙. Start启动服务,并且OpenBrowser,XE6真是方便啊 http://localh ...

  8. SQL2014还原到2008

    请使用with move选项来标识该文件的有效位置 sqlserver用命令还原数据库 restore   database   TT     from   disk='E:\test.bak'    ...

  9. spring quartz 任务注入spring service

    SchedulerFactoryBean+AdaptableJobFactory+QuartzJobBean package schedule.quartz5; import org.quartz.S ...

  10. Mysql 日期类型 date、datetime、timestamp.

    三种:  date.datetime.timestamp. date : 格式 "YYYY-MM-DD" ,范围 "1000-00-00"到"9999 ...