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实现仿百度输入框自动匹配功能的示例代码
Feb 19 Javascript
12306验证码破解思路分享
Mar 25 Javascript
javaScript中Math()函数注意事项
Jun 18 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
Jul 28 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
Aug 28 Javascript
js计算文本框输入的字符数
Oct 23 Javascript
jQuery获取及设置表单input各种类型值的方法小结
May 24 Javascript
用Vue.js实现监听属性的变化
Nov 17 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
Dec 08 Javascript
js设置文字颜色的方法示例
Dec 30 Javascript
详解JavaScript调用栈、尾递归和手动优化
Jun 03 Javascript
JS伪继承prototype实现方法示例
Jun 20 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
DC《神奇女侠2》因疫情推迟上映 温子仁新恐怖片《恶性》撤档
2020/04/09 欧美动漫
php 编写安全的代码时容易犯的错误小结
2010/05/20 PHP
php 面试碰到过的问题 在此做下记录
2011/06/09 PHP
C#静态方法与非静态方法实例分析
2014/09/22 PHP
PHP中将一个字符串部分字符用星号*替代隐藏的实现代码
2019/09/08 PHP
如果文字过长,则将过长的部分变成省略号显示
2006/06/26 Javascript
Node.js中的缓冲与流模块详细介绍
2015/02/11 Javascript
nodejs导出excel的方法
2015/06/30 NodeJs
javascript给span标签赋值的方法
2015/11/26 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
2016/07/09 Javascript
你知道setTimeout是如何运行的吗?
2016/08/16 Javascript
深入学习nodejs中的async模块的使用方法
2017/07/12 NodeJs
带你了解session和cookie作用原理区别和用法
2017/08/14 Javascript
妙用缓存调用链实现JS方法的重载
2018/04/30 Javascript
react-router 路由切换动画的实现示例
2018/12/03 Javascript
webpack常用构建优化策略小结
2019/11/21 Javascript
vue实现轮播图帧率播放
2021/01/26 Vue.js
[52:27]2018DOTA2亚洲邀请赛 3.31 小组赛B组 paiN vs Secret
2018/04/01 DOTA
python实现zencart产品数据导入到magento(python导入数据)
2014/04/03 Python
python获取Linux下文件版本信息、公司名和产品名的方法
2014/10/05 Python
Python实现微信公众平台自定义菜单实例
2015/03/20 Python
Python读写Json涉及到中文的处理方法
2016/09/12 Python
详解Python开发中如何使用Hook技巧
2017/11/01 Python
Python决策树之基于信息增益的特征选择示例
2018/06/25 Python
python3 对list中每个元素进行处理的方法
2018/06/29 Python
python opencv 读取本地视频文件 修改ffmpeg的方法
2019/01/26 Python
学习Django知识点分享
2019/09/11 Python
python中数据库like模糊查询方式
2020/03/02 Python
python列表删除和多重循环退出原理详解
2020/03/26 Python
香港百佳网上超级市场:PARKNSHOP.com
2020/06/10 全球购物
幼儿园大班新学期寄语
2014/01/18 职场文书
庆中秋节主题活动方案
2014/02/03 职场文书
电台实习生求职信
2014/02/25 职场文书
2014年安全保卫工作总结
2014/11/13 职场文书
辞职信怎么写?
2019/05/21 职场文书
如何正确理解python装饰器
2021/06/15 Python