<!doctype html>

<html>

<head>

<meta charset=utf-8>

<head>

<title>ajax 文件上传~~</title>

</head>

<script>

window.onload=function(){

var form=document.getElementsByTagName('form')[0];

form.onsubmit=function(){

var iframe=document.createElement('iframe');

iframe.src='do_upload.php';

var iframe_name="iframe"+Math.random();

iframe.name=iframe_name;

document.body.appendChild(iframe);

iframe.style.width='0px';

iframe.style.height='0px';

iframe.frameBorder='0';

form.target=iframe_name;

}

}

</script>

<body>

<form enctype='multipart/form-data' method='post' action='do_upload.php'>

请选择文件:<input type='file' name='myFile'/><br/>

<input type='submit'/>

<div id='msg'></div>

</form>

</body>

</html>

PHP部分

<?php

$up_file=$_FILES['myFile'];

if($up_file['error']===0){

if(!file_exists('./imgs')){

mkdir('./imgs');

}

$save_name=rand().$up_file['name'];

$bool=move_uploaded_file($up_file['tmp_name'],"./imgs/$save_name");

if($bool){

$msg='上传成功!';

}else{

$msg='上传失败!';

}

}

echo

"<script>

var msg=parent.document.getElementById('msg');

msg.innerHTML='<font color=red>$msg</forn>';

</script>";

?>

iframe实现Ajax文件上传效果示例的更多相关文章

  1. iframe和ajax文件上传方法

    为什么使用这两种方法文件上传呢,主要是因为局部刷新问题 上传问题,主要是使用form表单,或者用请求一个文件上传 iframe 大多网站都是有一个整体的固定结构,然后进行局部刷新,我们可以使用AJAX ...

  2. iframe 模拟ajax文件上传and formdata ajax 文件上传

    对于文件上传 有好多种方式,一直想总结 文件上传的方法 今天就来写下 iframe  的文件上传的代码 本人语言表达能里有限,不多说了 直接上代码. 首先看 总体页面. 总共就三个文件. 实际上也就是 ...

  3. form+iframe实现ajax文件上传

    在做文件上传时除了传入文件外,还有附件参数,并且要求不刷新页面,之前是表单提交的方式,现在修改成ajax上传的方式,由于没有选择用插件,所以用form+iframe的方式,并且这种方式对IE8以上及主 ...

  4. AJAX-----11iframe模拟ajax文件上传效果原理3

    如果直接给用户提示上传成功,那么如果用户上传的文件比较大点,那么等上半天都没反映,那么用户很有可能会刷新或者关了从来等... 那么会给我们服务器带来一定的影响,所以我们可以对这方面的用户体验度进行提升 ...

  5. 用Fine Uploader+ASP.NET MVC实现ajax文件上传[代码示例]

    Fine Uploader(http://fineuploader.com/)是一个实现 ajax 上传文件的 Javascript 组件. This project attempts to achi ...

  6. [Fine Uploader] 用Fine Uploader+ASP.NET MVC实现ajax文件上传[代码示例]

    Fine Uploader(http://fineuploader.com/)是一个实现 ajax 上传文件的 Javascript 组件   This project attempts to ach ...

  7. AJAX-----10iframe模拟ajax文件上传效果原理2

    在实际开发中其实我们可以给用户一些提示,比如上传成功或者上传失败,废话不多说,走码: <!DOCTYPE html> <html lang="en"> &l ...

  8. AJAX-----09iframe模拟ajax文件上传效果原理1

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传

    原文 [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传 Fine Uploader(http://fineuploader.com/)是一个实现 ajax 上传文件 ...

随机推荐

  1. ubuntu 语言设置

    1.ubuntu ibus 输入法无法切换拼音 原因未安装中文输入法 sudo apt install ibus-pinyin //安装pinyinwin + space(空格) 切换中文输入法 再用 ...

  2. uva12436 回头再做一次

    线段树维护等差数列,结点维护首项+公差即可 #include <cstdio> #include <cstring> #include <algorithm> us ...

  3. hdu3436 splaytree树模拟队列+离散化缩点

    数据较大,需要先把每个top不会操作到的段缩成一个点,记录其开始和结束的位置,和top能操作到的点一起建立一颗伸展树模拟 然后就是普通的队列模拟操作 /* 不会被top操作到的区间就缩点 通过spla ...

  4. Could not get lock /var/lib/apt/lists/lock - open (11: Resource temporarily unavailable)

    今天在对 Ubuntu 进行更新源的时候,突然出现下列错误(为了省事,更新前直接切换了 root 用户) 上网查了一下,网上解释说应该是之前那个更新被强制取消的问题,进程仍然还在.用这个命令查看一下: ...

  5. async/await套路编程

    对于并发任务,通常是用生成消费模型,对队列的处理可以使用类似master-worker的方式,master主要用户获取队列的msg,worker用户处理消息. 为了简单起见,并且协程更适合单线程的方式 ...

  6. Spring的核心之IoC容器创建对象

    Spring的Ioc容器,是Spring的核心内容: 作用:对象的创建和处理对象的依赖关系. Spring容器创建对象有以下几种方式: 1:调用无参数的构造器 <!-- 默认无参的构造器 --& ...

  7. hihocoder 1343 : Stable Members【拓扑排序】

    hihocoder #1343:题目 解释:一个学习小组,一共有N个学员,一个主管.每个学员都有自己的导师(一个或者多个),导师可以是其他学员也可以是主管.每周学员都要把自己的学习报告和收到的报告提交 ...

  8. vtiger二次开发

    搞了快两个星期的vtiger,慢慢的摸索到了一些东西 数据库相当的复杂,已有的模块我只是分析了下页面的加载,方法的调用 大部分时间在研究怎么添加新的功能模块,今天才知道模块可以通过输入命令的方式来添加 ...

  9. 响应式web布局设计实战总结教程

    响应性web设计的理念是:页面的设计与开发应当根据用户行为与设备环境(包括系统平台,屏幕尺寸,屏幕定向等)进行相应的响应及调整.具体的实践方式由多方面组成,包括弹性网格和布局,图片,css Media ...

  10. BZOJ1786 [Ahoi2008]Pair 配对 动态规划 逆序对

    欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ1786 题意概括 给出长度为n的数列,只会出现1~k这些正整数.现在有些数写成了-1,这些-1可以变 ...