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 上传文件 ...
随机推荐
- JS中sort()方法原理及使用
说明 如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序.要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较. arra ...
- 【hadoop】python通过hdfs模块读hdfs数据
hdfs官网:http://hdfscli.readthedocs.io/en/latest/api.html 一个非常好的博客:http://blog.csdn.net/gamer_gyt/arti ...
- 自己理解Java中的lambda
lambda是什么 "Lambda 表达式"(lambda expression)是一个匿名函数,Lambda表达式基于数学中的λ演算得名,直接对应于其中的lambda抽象(lam ...
- php数据类型之自动转换和强制转换
PHP在PHP 5.x阶段都是完全的弱类型的编程语言.所谓弱类型,就是在声明变量的时候,不需要指定变量的类型.我要声明一个整型的变量,我不用在前面非得写上类型,再写变量.而PHP 7 的性能有很大的提 ...
- django----重定向
urlpatterns = [ re_path(r'^(\w+)(\w+)/$',views.index,name="index"), ] 1.<a href="{ ...
- kmp算法专题总结
next数组的含义:next[i]表示以字符串s的第i个字符为结尾的后缀与s前缀匹配的长度 next数组也可以当做fail数组,即当模式串s[j]与串t[i]不匹配时,只要将j转换到next[j]继续 ...
- python 全栈开发，Day73(django多表添加,基于对象的跨表查询)
昨日内容回顾 多表方案: 如何确定表关系呢? 表关系是在2张表之间建立的,没有超过2个表的情况. 那么相互之间有2条关系线,先来判断一对多的关系. 如果其中一张表的记录能够对应另外一张表的多条记录,那 ...
- bootstrap——辅助类和响应式工具类
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- asp.net core session的使用
Session介绍 本文假设读者已经了解Session的概念和作用,并且在传统的.net framework平台上使用过. Asp.net core 1.0好像需要单独安装,在nuget控制台,选择你 ...
- BZOJ5074 小B的数字 BZOJ2017年10月月赛 其他
欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ5074 题意概括 题解 作为蒟蒻的我第一个就选择了过的人最多的D题. 不仔细看好吓人. 然而并不难. ...