iframe实现Ajax文件上传效果示例
<!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文件上传效果示例的更多相关文章
- iframe和ajax文件上传方法
为什么使用这两种方法文件上传呢,主要是因为局部刷新问题 上传问题,主要是使用form表单,或者用请求一个文件上传 iframe 大多网站都是有一个整体的固定结构,然后进行局部刷新,我们可以使用AJAX ...
- iframe 模拟ajax文件上传and formdata ajax 文件上传
对于文件上传 有好多种方式,一直想总结 文件上传的方法 今天就来写下 iframe 的文件上传的代码 本人语言表达能里有限,不多说了 直接上代码. 首先看 总体页面. 总共就三个文件. 实际上也就是 ...
- form+iframe实现ajax文件上传
在做文件上传时除了传入文件外,还有附件参数,并且要求不刷新页面,之前是表单提交的方式,现在修改成ajax上传的方式,由于没有选择用插件,所以用form+iframe的方式,并且这种方式对IE8以上及主 ...
- AJAX-----11iframe模拟ajax文件上传效果原理3
如果直接给用户提示上传成功,那么如果用户上传的文件比较大点,那么等上半天都没反映,那么用户很有可能会刷新或者关了从来等... 那么会给我们服务器带来一定的影响,所以我们可以对这方面的用户体验度进行提升 ...
- 用Fine Uploader+ASP.NET MVC实现ajax文件上传[代码示例]
Fine Uploader(http://fineuploader.com/)是一个实现 ajax 上传文件的 Javascript 组件. This project attempts to achi ...
- [Fine Uploader] 用Fine Uploader+ASP.NET MVC实现ajax文件上传[代码示例]
Fine Uploader(http://fineuploader.com/)是一个实现 ajax 上传文件的 Javascript 组件 This project attempts to ach ...
- AJAX-----10iframe模拟ajax文件上传效果原理2
在实际开发中其实我们可以给用户一些提示,比如上传成功或者上传失败,废话不多说,走码: <!DOCTYPE html> <html lang="en"> &l ...
- AJAX-----09iframe模拟ajax文件上传效果原理1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传
原文 [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传 Fine Uploader(http://fineuploader.com/)是一个实现 ajax 上传文件 ...
随机推荐
- LeetCode（7）：颠倒整数
Easy! 题目描述:给定一个范围为 32 位 int 的整数,将其颠倒. 例1: 输入:132 输出:321 例2: 输入:-123 输出:-321 例3: 输入:120 输出:21 注意:假设我们 ...
- ECLIPSE 导入外部文件或源码包
步骤: 点击Project->Properties->Libraries->Add External Class Folder.. ->选择你的文件路径->确定 注:如果 ...
- poj2763树链剖分边权+区间和
自己写的比原来的板子常数小了不少嘻嘻,边权处理起来比点权要复杂一下 由于根节点没有被映射的边,其被访问到的顺序是0,直接排除在线段树外 #include<iostream> #includ ...
- Linux下搭建ruby on rails环境
要搭建的东西:Ruby 1.8.7,Rails 2.3.8,rubygem 1.3.7 1.安装ruby sudo apt-get install ruby-full 2.安装rubygem sudo ...
- ERP产品采购申请管理（三十八）
BLL层代码: public class BioPurchaseBLL { /// <summary> /// 购进申请添加 /// </summary> /// <pa ...
- DailyWallpaper v1.03 released
根据这一段时间的使用发现了一些问题,重新修正一下. 修正电脑从休眠状态中恢复时如果没有网络连接程序报错的bug. 添加了异常处理语句,防止抓取网页数据时的错误. 这个版本将是最后一个bug fix版本 ...
- 安卓在代码中设置TextView的drawableLeft、drawableRight、drawableTop、drawableBottom
Drawable rightDrawable = getResources().getDrawable(R.drawable.icon_new); //调用setCompoundDrawables时, ...
- openstack学习-KeyStone安装（二）
一.安装keystone # yum install -y openstack-keystone httpd mod_wsgi memcached python-memcached 二.设置Memca ...
- mvn2gradle
mvn项目根目录下,运行 gradle init --type pom 备注: 1)确保build.gradle, settings.gradle不存在 2)gradle 3.1测试通过 3)修改bu ...
- Python 动态生成多个变量
引用自:https://blog.csdn.net/u013061183/article/details/78015673 用Python循环创建多个变量, 如创建 a1= .a2= .a3= ...