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 相关文章推荐
js的闭包的一个示例说明
Nov 18 Javascript
javascript 框架小结 个人工作经验
Jun 13 Javascript
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
Nov 12 Javascript
js继承的实现代码
Aug 05 Javascript
javascript 实现键盘上下左右功能的小例子
Sep 15 Javascript
移动设备web开发首选框架:zeptojs介绍
Jan 29 Javascript
js实现表格筛选功能
Jan 18 Javascript
在vue2.0中引用element-ui组件库的方法
Jun 21 Javascript
小程序实现人脸识别功能(百度ai)
Dec 23 Javascript
微信小程序 如何保持登录状态
Aug 16 Javascript
Vue性能优化的方法
Jul 30 Javascript
Vue文本模糊匹配功能如何实现
Jul 30 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
PHP环境搭建最新方法
2006/09/05 PHP
php 冒泡排序 交换排序法
2011/05/10 PHP
Smarty简单生成表单元素的方法示例
2016/05/23 PHP
javascript打开新窗口同时关闭旧窗口
2009/01/16 Javascript
MooBox 基于Mootools的对话框插件
2012/01/20 Javascript
js 固定悬浮效果实现思路代码
2013/08/02 Javascript
常见的javascript跨域通信方法
2015/12/31 Javascript
一道常被人轻视的web前端常见面试题(JS)
2016/02/15 Javascript
JavaScript数组去重的几种方法效率测试
2016/10/23 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
2016/12/06 Javascript
详解ECMAScript6入门--Class对象
2017/04/27 Javascript
基于iScroll实现下拉刷新和上滑加载效果
2017/07/18 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
2017/08/16 jQuery
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
2018/03/06 Javascript
vue-cli 打包使用history模式的后端配置实例
2018/09/20 Javascript
vue通过style或者class改变样式的实例代码
2018/10/30 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
2019/04/22 Javascript
使用webpack编译es6代码的方法步骤
2019/04/28 Javascript
[15:46]教你分分钟做大人——沙王
2015/03/11 DOTA
[52:06]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
跟老齐学Python之一个免费的实验室
2014/09/14 Python
Python新手入门最容易犯的错误总结
2017/04/24 Python
python 从csv读数据到mysql的实例
2018/06/21 Python
Python高斯消除矩阵
2019/01/02 Python
Python实现简单的列表冒泡排序和反转列表操作示例
2019/07/10 Python
python模拟键盘输入 切换键盘布局过程解析
2019/08/15 Python
基于Python实现拆分和合并GIF动态图
2019/10/22 Python
Python计算信息熵实例
2020/06/18 Python
会计专业自我鉴定范文
2013/10/06 职场文书
安全生产活动月方案
2014/03/09 职场文书
乡党政领导班子群众路线教育实践活动个人对照检查材料
2014/09/20 职场文书
在职证明书范本(2014新版)
2014/09/25 职场文书
卫生院艾滋病宣传活动总结
2015/05/09 职场文书
mysql如何配置白名单访问
2021/06/30 MySQL
MySql 缓存查询原理与缓存监控和索引监控介绍
2021/07/02 MySQL
Python中super().__init__()测试以及理解
2021/12/06 Python