我们通过动态的创建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. OTL技术应用

    什么是OTL:OTL 是 Oracle, Odbc and DB2-CLI TemplateLibrary 的缩写,是一个操控关系数据库的C++模板库,它目前几乎支持所有的当前各种主流数据库,如下表所 ...

  2. CentOS修改TimeZone

    查看: date -R +0800   修改: sudo rm -rf /etc/localtime sudo cp /usr/share/zoneinfo/America/Los_Angeles / ...

  3. scala操作hbase案例

    案例取自streaming-app项目 package com.asiainfo.ocdc.streaming.tools import org.apache.hadoop.hbase.HBaseCo ...

  4. sql isdate判断时间函数(小技巧)

    isdate 是一个判断字符串是否为日期的函数,0代表所传入的字符串不是日期,1代表传入的参数是日期. select   isdate('30/12/2014')  ---0 第一个是 mdy --如 ...

  5. Python - Django - 登录页面

    登录页 login.html: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta char ...

  6. sqlserver操作命令

    启动命令:Net Start MSSqlServer 暂停命令:Net Pause MSSqlServer 重新启动暂停的命令:Net Continue MSSqlServer 停止命令:Net st ...

  7. Requests库入门

    安装: $ pip install requests Response对象的一些基本属性: Response.status_code 请求的返回状态,正常为200 Response.text 页面的字 ...

  8. leetcode122

    public class Solution { public int MaxProfit(int[] prices) { var list = new List<KeyValuePair< ...

  9. IE浏览器中的加载项怎么删除

    IE浏览器中的加载项是一些软件或者浏览器的功能控件,我们可以通过禁用.开启来控制是否使用某些加载项,同时可以将一些加载项删除. 比如当我们遇到了一些不好的加载项,想要将它删除,通过这篇经验,教大家怎么 ...

  10. time 时间内置模块3种形态的转化

    import time print(time.time())  #获得时间戳 1526998642.877814 print(time.sleep(2))  #停止2秒 print(time.gmti ...