我们通过动态的创建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. 模型融合策略voting、averaging、stacking

    原文:https://zhuanlan.zhihu.com/p/25836678 1.voting 对于分类问题,采用多个基础模型,采用投票策略选择投票最多的为最终的分类. 2.averaging 对 ...

  2. Web 项目遇到的乱码问题

    问题代码: jsp: <%@ page language="java" contentType="text/html; charset=UTF-8" pa ...

  3. Ubuntu16.04或18.04上安装QQ微信迅雷

    0. 写在前面 没办法,公司的电脑是Windows的,windows下面开发实在太恶心人,并且开发中需要编译golang和C++的程序,于是开始了Linux的折腾之路. 如果你只是想用Linux环境开 ...

  4. mysql5.5版本以后插入中午显示问号的解决办法

    先看看中午变问号的结果 现在看看我们建立数据库和建表的操作 看到这里相信大家都知道创建成功了,没错,数据库跟表是创建成功了,可当你录入的信息带中文的时候就显示问号. 现在用传统的解决办法 在查看下表的 ...

  5. C#中 ThreadStart和ParameterizedThreadStart区别

    最主要区别: 1.Thread 是启动一个线程,但是没有参数. 2.ParameterThreadStart  线程可以接受一个输入参数 ThreadStart: ThreadStart这个委托定义为 ...

  6. Oauth2.0(六):Resource Owner Password Credentials 授权和 Client Credentials 授权

    这两种简称 Password 方式和 Client 方式吧,都只适用于应用是受信任的场景.一个典型的例子是同一个企业内部的不同产品要使用本企业的 Oauth2.0 体系.在有些情况下,产品希望能够定制 ...

  7. Java操作Sqoop对象

    Windows下使用Eclipse工具操作Sqoop1.4.6对象 Sqoop是用来在关系型数据库与Hadoop之间进行数据的导入导出,Windows下使用Eclipse工具操作时,需要先搭建好Had ...

  8. Python之函数——基础篇

    函数 函数,在BASIC中,叫subroutine(子过程或子程序),在Pascal中叫做procedure(过程)和function,在C中只有function,在Java中叫method. 定义: ...

  9. 《GPU高性能编程CUDA实战》第十章 流

    ▶ 本章介绍了页锁定内存和流的使用方法,给出了测试内存拷贝.(单 / 双)流控制下的内存拷贝的例子. ● 测试内存拷贝 #include <stdio.h> #include " ...

  10. Springboot spring data jpa 多数据源的配置01

    Springboot spring data jpa 多数据源的配置 (说明:这只是引入了多个数据源,他们各自管理各自的事务,并没有实现统一的事务控制) 例: user数据库   global 数据库 ...