js动态创建上传表单通过iframe模拟Ajax实现无刷新


Posted in Javascript onFebruary 20, 2014
<script> 
window.onload=function(){ 
upfile('file.php'); 
} 
/* 
** url 路径 
**/ 
function upfile(url){ 
//创建iframe 
var iframe = document.createElement("iframe"); 
document.body.appendChild(iframe); 
iframe.id = 'iframeName'; 
iframe.name = 'iframeName'; 
iframe.style.display = 'none'; 
//创建form 
var turnForm = document.createElement("form"); 
document.body.appendChild(turnForm); 
turnForm.method = 'post'; 
turnForm.action = url; 
turnForm.encoding = "multipart/form-data"; 
turnForm.name = 'formNamer'; 
turnForm.target = 'iframeName'; 
//创建隐藏表单 
var newElement = document.createElement("input"); 
newElement.setAttribute("name","inputname"); 
newElement.setAttribute("type","file"); 
newElement.setAttribute("value",''); 
turnForm.appendChild(newElement); 
} 
//form提交 
function formSubmit() { 
//var res = document.formNamer.inputname.value; 
document.formNamer.submit(); 
} 
//返回值 
function callback(result){ 
//window.parent.document.getElementById('iframeName').style.display = 'block'; 通过iframe 查看后台数据 
if(result['error'] == 0){ 
document.getElementById('test').src= result['img'][1]+'/'+result['img'][2]; 
}else if(result['error'] == 1){ 
alert(result['meg']); 
}else if(result['error'] == 2){ 
alert(result['meg']); 
}else if(result['error'] == 3){ 
alert(result['meg']); 
}else if(result['error'] == 4){ 
alert(result['meg']); 
}else{ 
alert(result['meg']); 
} 
} 
</script> 
<a href="javascript:formSubmit()">上传</a> 
<img src="http://blog.163.com/zhwxl_zyx/blog/img/pasic.jpg" id="test" width="200" height="200">

file.php
<?php 
header("content-Type: text/html; charset=Utf-8"); if(@is_uploaded_file($_FILES['inputname']['tmp_name'])){ 
$f = $_FILES['inputname']; 
$name = $f["name"]; 
$size = $f["size"]; 
$type = $f["type"]; 
$fileName = $f["tmp_name"]; 
switch ($type) { 
case 'image/jpg':$okType = true; 
break; 
case 'image/jpeg':$okType = true; 
break; 
case 'image/png':$okType = true; 
break; 
case 'image/gif':$okType = true; 
break; 
} 
if($okType){ 
$error = $f["error"]; 
echo '文件名称:'.$name.'<br>'; 
echo '文件类型:'.$type.'<br>'; 
echo '文件大小:'.round($size/1024).'K<br>'; 
echo '文件临时存放路径:'.$fileName.'<br>'; 
$fileDir = dirname(__FILE__).'/img/upfile'.time().$name; 
$img = explode('/',$fileDir); 
move_uploaded_file($fileName, $fileDir); 
$data = array(); 
$data['img'] = $img; 
$data['name'] = $name; 
$data['type'] = $type; 
$data['size'] = $size; 
$data['filename'] = $fileName; 
$data['fileDir'] = $fileDir; 
if($error==0){ 
/*echo '上传成功!'; 
echo '预览:'; 
echo "<img src="http://blog.163.com/zhwxl_zyx/blog/.$img[1].'/'.$img[2]." width='200' height='200'><br>"; 
echo '文件名称'.$img[2];*/ 
$data['error'] = 0; 
exit("<script>parent.callback(".json_encode($data).");</script>"); 
}elseif($error==1){ 
$data['error'] = 1; 
$data['meg'] = '超过了文件大小,在php.ini文件中设置'; 
exit("<script>parent.callback(".json_encode($data).");</script>"); 
}elseif ($error==2){ 
$data['error'] = 2; 
$data['meg'] = '超过了文件的大小MAX_FILE_SIZE选项指定的值'; 
exit("<script>parent.callback(".json_encode($data).");</script>"); 
}elseif ($error==3){ 
$data['error'] = 3; 
$data['meg'] = '文件只有部分被上传'; 
exit("<script>parent.callback(".json_encode($data).");</script>"); 
}elseif ($error==4){ 
$data['error'] = 4; 
$data['meg'] = '没有文件被上传'; 
exit("<script>parent.callback(".json_encode($data).");</script>"); 
}else{ 
$data['meg'] = '上传文件大小为0'; 
exit("<script>parent.callback(".json_encode($data).");</script>"); 
} 
} 
}else{ 
$data['error'] = 4; 
$data['meg'] = '没有文件被上传'; 
exit("<script>parent.callback(".json_encode($data).");</script>"); 
} 
?>
Javascript 相关文章推荐
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
Nov 10 Javascript
jQuery的attr与prop使用介绍
Oct 10 Javascript
jquery中show()、hide()和toggle()用法实例
Jan 15 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
Sep 24 Javascript
AngularJS之页面跳转Route实例代码
Mar 10 Javascript
WdatePicker.js时间日期插件的使用方法
Jul 26 Javascript
js实现canvas图片与img图片的相互转换的示例
Aug 31 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
Sep 22 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
Dec 20 Javascript
bootstrap tooltips在 angularJS中的使用方法
Apr 10 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
May 30 Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
Apr 08 Javascript
JS中数组Array的用法示例介绍
Feb 20 #Javascript
javascript的回调函数应用示例
Feb 20 #Javascript
JS的get和set使用示例
Feb 20 #Javascript
jQuery避免$符和其他JS库冲突的方法对比
Feb 20 #Javascript
JS 删除字符串最后一个字符的实现代码
Feb 20 #Javascript
js确认删除对话框效果的示例代码
Feb 20 #Javascript
多种方法实现load加载完成后把图片一次性显示出来
Feb 19 #Javascript
You might like
PHPMyadmin 配置文件详解(配置)
2009/12/03 PHP
php分页函数示例代码分享
2014/02/24 PHP
深入浅析PHP的session反序列化漏洞问题
2017/06/15 PHP
PHP常用日期加减计算方法实例小结
2018/07/31 PHP
PHP+redis实现微博的推模型案例分析
2019/07/10 PHP
Yii 框架使用Forms操作详解
2020/05/18 PHP
javascript获得网页窗口实际大小的示例代码
2013/09/21 Javascript
如何在MVC应用程序中使用Jquery
2014/11/17 Javascript
jQuery源码解读之hasClass()方法分析
2015/02/20 Javascript
jQuery判断指定id的对象是否存在的方法
2015/05/22 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
2015/10/16 Javascript
jQuery+css实现炫目的动态块漂移效果
2016/01/28 Javascript
使用JS实现图片展示瀑布流效果的实例代码
2016/09/12 Javascript
Javascript单例模式的介绍和实例
2016/10/08 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
2018/05/31 Javascript
js array数组对象操作方法汇总
2019/03/18 Javascript
webpack中的模式(mode)使用详解
2020/02/20 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
2020/04/30 Javascript
pandas 数据实现行间计算的方法
2018/06/08 Python
python3实现点餐系统
2019/01/24 Python
Python模块的定义,模块的导入,__name__用法实例分析
2020/01/07 Python
使用AJAX和Django获取数据的方法实例
2020/10/25 Python
详解Python GUI编程之PyQt5入门到实战
2020/12/10 Python
基于Html5实现的react拖拽排序组件示例
2018/08/13 HTML / CSS
澳大利亚新奇小玩意网站:Yellow Octopus
2017/12/28 全球购物
静态成员和非静态成员的区别
2012/05/12 面试题
关爱女孩行动实施方案
2014/03/13 职场文书
水毁工程实施方案
2014/04/01 职场文书
三八节标语
2014/06/27 职场文书
卫生院艾滋病宣传活动小结
2014/07/09 职场文书
群众路线自我剖析范文
2014/11/04 职场文书
物业工程部岗位职责
2015/02/11 职场文书
员工自我工作评价
2015/03/06 职场文书
中秋节主题班会
2015/08/14 职场文书
MySQL 分组查询的优化方法
2021/05/12 MySQL
微软官方消息,在 2023 年 4 月 11 日之后微软将不再为 Office 2013 和 Skype for Business 2015 提供安全更新
2022/04/21 数码科技