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判断用户浏览器是否是XP SP2的IE6
Mar 08 Javascript
JS 有名函数表达式全面解析
Mar 19 Javascript
js 链式延迟执行DOME
Jan 04 Javascript
jquery动态改变form属性提交表单
Jun 03 Javascript
Bootstrap基础学习
Jun 16 Javascript
浅谈jquery的map()和each()方法
Jun 12 Javascript
javascirpt实现2个iframe之间传值的方法
Jun 30 Javascript
vue不通过路由直接获取url中参数的方法示例
Aug 24 Javascript
在vue中封装可复用的组件方法
Mar 01 Javascript
从零开始搭建webpack+react开发环境的详细步骤
May 18 Javascript
javascript将16进制的字符串转换为10进制整数hex
Mar 05 Javascript
react-router-dom 嵌套路由的实现
May 02 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程序的方法
2009/03/09 PHP
PhpDocumentor 2安装以及生成API文档的方法
2014/05/21 PHP
PHP+JS实现大规模数据提交的方法
2015/07/02 PHP
php基于Fleaphp框架实现cvs数据导入MySQL的方法
2016/02/23 PHP
用Javscript实现表单复选框的全选功能
2007/05/25 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
2013/01/15 Javascript
JS字符串处理实例代码
2013/08/05 Javascript
基于javascript滚动图片具体实现
2013/11/18 Javascript
jquery ajax jsonp跨域调用实例代码
2013/12/11 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
2015/11/30 Javascript
javascript事件冒泡简单示例
2016/06/20 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
2016/11/24 Javascript
JS中的phototype详解
2017/02/04 Javascript
JavaScript中双向数据绑定详解
2017/05/03 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
2017/07/10 Javascript
解决vue build打包之后首页白屏的问题
2018/03/06 Javascript
你点的 ES6一些小技巧,请查收
2018/04/25 Javascript
详解vue中axios的封装
2018/07/18 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
2018/08/06 Javascript
python的else子句使用指南
2016/02/27 Python
利用Python开发实现简单的记事本
2016/11/15 Python
对pandas的行列名更改与数据选择详解
2018/11/12 Python
对python自动生成接口测试的示例讲解
2018/11/30 Python
python实现flappy bird游戏
2018/12/24 Python
Django+Django-Celery+Celery的整合实战
2021/01/20 Python
详解HTML5中的拖放事件(Drag 和 drop)
2016/11/14 HTML / CSS
Nike爱尔兰官方网站:Nike.com (IE)
2018/03/12 全球购物
入团者的自我评价分享
2013/12/02 职场文书
大四学生思想汇报
2014/01/13 职场文书
文艺晚会主持词
2014/03/24 职场文书
担保书怎么写
2014/04/01 职场文书
2014小学教师个人工作总结
2014/11/10 职场文书
清洁工个人总结
2015/03/04 职场文书
土建施工员岗位职责
2015/04/11 职场文书
2016年中秋节寄语大全
2015/12/07 职场文书
详解Python小数据池和代码块缓存机制
2021/04/07 Python