我们通过动态的创建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 callee和caller

    arguments的主要用途是保存参数,但是他还有callee属性. 一:callee指向arguments对象的函数. 示例一: function calture(num) {//阶乘计算 if ( ...

  2. ioncube 加密软件 linux 使用方法

    https://www.ioncube.com/sa_encoder.php?page=pricing 购买成功后 解压文件包 装了一个linux 版的加密软件 目录:/webdata/soft/io ...

  3. Python while 循环使用实例

    while循环是在Python中的循环结构之一. while循环继续,直到表达式变为假.表达的是一个逻辑表达式,必须返回一个true或false值,本文章向码农介绍Python while 循环使用方 ...

  4. Spark Streaming 例子

    NetworkWordCount.scala /* * Licensed to the Apache Software Foundation (ASF) under one or more * con ...

  5. web基础 (一) http协议

    一.什么是web服务 浏览器与网页服务端发起的请求与回应(返回的是一堆字符串,浏览器去渲染生成页面!)都是 标准的CS模式 ---- bs模式:客户端用浏览器即可,服务端需要自己去写 http协议是建 ...

  6. BP神经网络的公式推导

    如果感觉自己看不懂,那就看看我博客的梯度下降法,博文最后的感知机也算最简单的BP神经网络吧,用的也是反馈(w,b):典型梯度下降法 BP网络的结构 BP网络的结构如下图所示,分为输入层(Input), ...

  7. Node fs, url, http 组合小型的服务器 ( 满足html请求, get, post 传值 )

    <script type="text/javascript"> /* * 引入模块 */ var http = require('http'); var url = r ...

  8. VS 类快捷键

    生成类的构造函数 输入 ctrl,按两下 TAB 键 快速添加属性输入prop,按2下tab键 添加折叠输入reg,按2下tab键,快速输入#region输入class,按下2次tab建,快速输入类定 ...

  9. framework4.0 IIS配置支持ashx

    framework4.0 https://www.microsoft.com/zh-cn/download/details.aspx?id=17718 IIS添加对ashx文件的支持 http://w ...

  10. discuz 修改积分策略( 在周期中添加"每周" )

    在  source/admincp/admincp_credits.php 文件中, ctrl+f 搜索  $lang['setting_credits_policy_cycletype_1'] 处, ...