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事件冒泡详解和捕获、阻止方法
Apr 12 Javascript
struts2+jquery组合验证注册用户是否存在
Apr 30 Javascript
Javascript模拟加速运动与减速运动代码分享
Dec 11 Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
Apr 06 Javascript
vue.js中指令Directives详解
Mar 20 Javascript
详解用node-images 打造简易图片服务器
May 08 Javascript
微信小程序本地缓存数据增删改查实例详解
May 24 Javascript
JavaScript中使用Async实现异步控制
Aug 15 Javascript
Vue.js进行查询操作的实例详解
Aug 25 Javascript
史上最为详细的javascript继承(推荐)
May 18 Javascript
小程序中英文混合排序问题解决
Aug 02 Javascript
js实现淘宝浏览商品放大镜功能
Oct 28 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生成自己的LOG文件
2006/10/09 PHP
Email+URL的判断和自动转换函数
2006/10/09 PHP
php动态生成函数示例
2014/03/21 PHP
Thinkphp自定义生成缩略图尺寸的方法
2019/08/05 PHP
laravel 使用auth编写登录的方法
2019/09/30 PHP
ExtJS中文乱码之GBK格式编码解决方案及代码
2013/01/20 Javascript
使用闭包对setTimeout进行简单封装避免出错
2013/07/10 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
2014/05/11 Javascript
js使用for循环及if语句判断多个一样的name
2014/09/09 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
2015/09/11 Javascript
在JavaScript中call()与apply()区别
2016/01/22 Javascript
纯JS实现可拖拽表单的简单实例
2016/09/02 Javascript
JS封装的选项卡TAB切换效果示例
2016/09/20 Javascript
JS数组操作之增删改查的简单实现
2017/08/21 Javascript
vue实现验证码按钮倒计时功能
2018/04/10 Javascript
使用Promise封装小程序wx.request的实现方法
2019/11/13 Javascript
原生js实现的金山打字小游戏(实例代码详解)
2020/03/16 Javascript
JS实现canvas简单小画板功能
2020/06/23 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
2021/01/07 Vue.js
Python  __getattr__与__setattr__使用方法
2008/09/06 Python
Python对象的深拷贝和浅拷贝详解
2014/08/25 Python
python自然语言编码转换模块codecs介绍
2015/04/08 Python
Python随机生成数模块random使用实例
2015/04/13 Python
Python实现返回数组中第i小元素的方法示例
2017/12/04 Python
使用python对文件中的单词进行提取的方法示例
2018/12/21 Python
详解Python装饰器
2019/03/25 Python
Django Sitemap 站点地图的实现方法
2019/04/29 Python
python实现五子棋人机对战游戏
2020/03/25 Python
不到20行实现Python代码即可制作精美证件照
2020/04/24 Python
python绘制趋势图的示例
2020/09/17 Python
开会迟到检讨书
2014/02/03 职场文书
抽样调查项目计划书
2014/04/24 职场文书
个人四风对照检查材料
2014/09/26 职场文书
教你使用Python pypinyin库实现汉字转拼音
2021/05/27 Python
Spring Cache和EhCache实现缓存管理方式
2021/06/15 Java/Android
sql查询语句之平均分、最高最低分及排序语句
2022/05/30 MySQL