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 相关文章推荐
JavaScript网页制作特殊效果用随机数
May 22 Javascript
ASP SQL防注入的方法
Dec 25 Javascript
qTip 基于JQuery的Tooltip插件[兼容性好]
Sep 01 Javascript
jquery 学习之一 对象访问
Nov 23 Javascript
Jquery操作js数组及对象示例代码
May 11 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
May 15 Javascript
jquery实现拖拽调整Div大小
Jan 30 Javascript
JavaScript中的small()方法使用详解
Jun 08 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
Aug 09 Javascript
JS模态窗口返回值兼容问题的完美解决方法
May 28 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
Nov 07 Javascript
react native 仿微信聊天室实例代码
Sep 17 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/11/26 PHP
php adodb连接mssql解决乱码问题
2009/06/12 PHP
PHP中文分词 自动获取关键词介绍
2012/11/13 PHP
Thinkphp连表查询及数据导出方法示例
2016/10/15 PHP
createElement动态创建HTML对象脚本代码
2008/11/24 Javascript
jQuery实现表头固定效果的实例代码
2013/05/24 Javascript
Bootstrap精简教程
2015/11/27 Javascript
通过正则表达式获取url中参数的简单实现
2016/06/07 Javascript
JavaScript解八皇后问题的方法总结
2016/06/12 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
2016/06/21 Javascript
用JS写的一个Ajax库(实例代码)
2016/08/06 Javascript
利用VUE框架,实现列表分页功能示例代码
2017/01/12 Javascript
详谈$.data()的用法和作用
2017/02/13 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
2017/04/27 jQuery
使用vue-aplayer插件时出现的问题的解决
2018/03/02 Javascript
浅谈vuex actions和mutation的异曲同工
2018/12/13 Javascript
通过js示例讲解时间复杂度与空间复杂度
2019/08/06 Javascript
详细分析vue响应式原理
2020/06/22 Javascript
Python进程通信之匿名管道实例讲解
2015/04/11 Python
Python抓取框架Scrapy爬虫入门:页面提取
2017/12/01 Python
Python使用Matplotlib实现雨点图动画效果的方法
2017/12/23 Python
python pandas 如何替换某列的一个值
2018/06/09 Python
Python微医挂号网医生数据抓取
2019/01/24 Python
python 计算一个字符串中所有数字的和实例
2019/06/11 Python
python实现数据分析与建模
2019/07/11 Python
Django框架HttpResponse对象用法实例分析
2019/11/01 Python
tensorflow mnist 数据加载实现并画图效果
2020/02/05 Python
python使用pyecharts库画地图数据可视化的实现
2020/03/25 Python
毕业生的自我鉴定
2013/10/29 职场文书
教育技术学专业职业规划书
2014/03/03 职场文书
少先队活动总结
2014/08/29 职场文书
物业接待员岗位职责
2015/04/15 职场文书
房产证明范本
2015/06/19 职场文书
mybatis使用oracle进行添加数据的方法
2021/04/27 Oracle
Java Spring 控制反转(IOC)容器详解
2021/10/05 Java/Android
十大最强岩石系宝可梦,怪颚龙实力最强,第七破坏力很强
2022/03/18 日漫