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 相关文章推荐
基于jquery实现的服务器验证控件的启用和禁用代码
Apr 27 Javascript
ExtJs的Date格式字符代码
Dec 30 Javascript
有关javascript的性能优化 (repaint和reflow)
Apr 12 Javascript
jQuery Dialog对话框事件用法实例分析
May 10 Javascript
javascript闭包功能与用法实例分析
Apr 06 Javascript
关于foreach循环中遇到的问题小结
May 08 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
Aug 28 Javascript
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
写一个Vue Popup组件
Feb 25 Javascript
javascript实现贪吃蛇经典游戏
Apr 10 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
Oct 16 Javascript
Vue基于localStorage存储信息代码实例
Nov 16 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 cli 方式 在crotab中运行解决
2010/02/08 PHP
php下获取http状态的实现代码
2014/05/09 PHP
php获取json数据所有的节点路径
2015/05/17 PHP
php操作memcache缓存方法分享
2015/06/03 PHP
ThinkPHP中Common/common.php文件常用函数功能分析
2016/05/20 PHP
ThinkPHP中create()方法自动验证实例
2017/04/26 PHP
浅谈PHP面向对象之访问者模式+组合模式
2017/05/22 PHP
jquery 学习之二 属性相关
2010/11/23 Javascript
用JQuery在网页中实现分隔条功能的代码
2012/08/09 Javascript
jquery插件jquery倒计时插件分享
2013/12/27 Javascript
纯Javascript实现ping功能的方法
2015/03/20 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
2015/11/07 Javascript
javascript实现平滑无缝滚动
2020/08/09 Javascript
JavaScript输入框字数实时统计更新
2017/06/17 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
2018/04/24 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
2018/09/17 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
2019/10/29 Javascript
深入理解 TypeScript Reflect Metadata
2019/12/12 Javascript
JS代码检查工具ESLint介绍与使用方法
2020/02/04 Javascript
[01:06:18]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第二场 1月26日
2021/03/11 DOTA
详解python之配置日志的几种方式
2017/05/22 Python
python实现决策树C4.5算法详解(在ID3基础上改进)
2017/05/31 Python
Python实现线程状态监测简单示例
2018/03/28 Python
python实现Windows电脑定时关机
2018/06/20 Python
解决pycharm不能自动保存在远程linux中的问题
2021/02/06 Python
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
2015/04/24 HTML / CSS
印度第一网上礼品店:IGP.com
2020/02/06 全球购物
大学生大二自我鉴定
2013/10/28 职场文书
2014自主招生自荐信策略
2014/01/27 职场文书
暑期教师培训方案
2014/06/07 职场文书
优秀中职教师事迹材料
2014/08/26 职场文书
报效祖国演讲稿
2014/09/15 职场文书
幼师小班个人总结
2015/02/12 职场文书
美丽人生观后感
2015/06/03 职场文书
签证工作证明模板
2015/06/15 职场文书
JS封装cavans多种滤镜组件
2022/02/15 Javascript