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 相关文章推荐
sina的lightbox效果。
Jan 09 Javascript
js实现杯子倒水问题自动求解程序
Mar 25 Javascript
javascript + jquery实现定时修改文章标题
Mar 19 Javascript
input标签内容改变的触发事件介绍
Jun 18 Javascript
node.js中的http.request方法使用说明
Dec 14 Javascript
node.js中的http.get方法使用说明
Dec 14 Javascript
jQuery 遍历函数详解
Jul 05 Javascript
node.js学习之base64编码解码
Oct 21 Javascript
利用vue+elementUI实现部分引入组件的方法详解
Nov 22 Javascript
VuePress 快速踩坑小结
Feb 14 Javascript
JavaScript封闭函数及常用内置对象示例
May 13 Javascript
详解vue 在移动端体验上的优化解决方案
May 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
for循环连续求和、九九乘法表代码
2012/02/20 PHP
PHP魔术方法以及关于独立实例与相连实例的全面讲解
2016/10/18 PHP
原生js实现日期联动
2015/01/12 Javascript
JavaScript 七大技巧(二)
2015/12/13 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
2016/05/30 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
2016/05/30 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
2017/03/07 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
2017/05/05 Javascript
推荐10款扩展Web表单的JS插件
2017/12/25 Javascript
Node.js静态服务器的实现方法
2018/02/28 Javascript
vue-test-utils初使用详解
2019/05/23 Javascript
[04:27]2014DOTA2国际邀请赛 NAVI战队官方纪录片
2014/07/21 DOTA
Python使用cx_Freeze库生成msi格式安装文件的方法
2018/07/10 Python
python利用 keyboard 库记录键盘事件
2020/10/16 Python
html5 标签
2009/07/16 HTML / CSS
Html5 页面适配iPhoneX(就是那么简单)
2019/09/05 HTML / CSS
Emporio Armani腕表天猫官方旗舰店:乔治·阿玛尼为年轻人设计的副线品牌
2017/07/02 全球购物
英国时尚服饰电商:Boohoo
2017/10/12 全球购物
bareMinerals官网:矿物质化妆品和护肤品
2018/02/04 全球购物
工商管理专业职业生涯规划
2014/01/01 职场文书
法定代表人授权委托书
2014/04/04 职场文书
电子商务助理求职自荐信
2014/04/10 职场文书
消防安全标语
2014/06/07 职场文书
机械设计制造及其自动化专业求职信
2014/06/17 职场文书
售房协议书范本2014
2014/10/23 职场文书
二年级语文上册复习计划
2015/01/19 职场文书
给老婆的检讨书
2015/01/27 职场文书
大学生个人简历自荐信
2015/03/06 职场文书
会计岗位职责范本
2015/04/02 职场文书
2016年社区六一儿童节活动总结
2016/04/06 职场文书
2019职场实习报告该怎么写?
2019/07/01 职场文书
选择比努力更重要?这是长期以来对“努力”的最大误解
2019/07/12 职场文书
vue3中provide && inject的使用
2021/07/01 Vue.js
python中urllib包的网络请求教程
2022/04/19 Python
Python 图片添加美颜效果
2022/04/28 Python
Redis 限流器
2022/05/15 Redis