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 点击整页变灰的效果(可做退出效果)。
Jan 09 Javascript
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
Aug 28 Javascript
浅析document.createDocumentFragment()与js效率
Jul 08 Javascript
javascript DIV实现跟随鼠标移动
Mar 19 Javascript
JS实现JSON.stringify的实例代码讲解
Feb 07 Javascript
使用JavaScriptCore实现OC和JS交互详解
Mar 28 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
May 11 Javascript
JsChart组件使用详解
Mar 04 Javascript
js计算两个日期间的天数月的实例代码
Sep 20 Javascript
vue 的 solt 子组件过滤过程解析
Sep 07 Javascript
微信小程序吸底区域适配iPhoneX的实现
Apr 09 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
Aug 14 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 Smarty初体验二 获取配置信息
2011/08/08 PHP
php用header函数实现301跳转代码实例
2013/11/25 PHP
PHP入门教程之字符串处理技巧总结(转换,过滤,解析,查找,截取,替换等)
2016/09/11 PHP
laravel5.6实现数值转换
2019/10/23 PHP
PHP如何解决微信文章图片防盗链
2020/12/09 PHP
使用Javascript和DOM Interfaces来处理HTML
2006/10/09 Javascript
ext combox 下拉框不出现自动提示,自动选中的解决方法
2010/02/24 Javascript
Jquery 的扩展方法总结
2011/10/01 Javascript
javascript数字格式化通用类 accounting.js使用
2012/08/24 Javascript
js函数排序的实例代码
2013/07/01 Javascript
Javascript基础教程之argument 详解
2015/01/18 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
2015/04/12 Javascript
JQuery自动触发事件的方法
2015/06/13 Javascript
js实现拉幕效果的广告代码
2015/09/02 Javascript
JavaScript编写简单的计算器
2015/11/25 Javascript
浅析AngularJs HTTP响应拦截器
2015/12/28 Javascript
前端性能优化及技巧
2016/05/06 Javascript
Html中 IFrame的用法及注意点
2016/12/22 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
2017/03/10 Javascript
js仿淘宝商品放大预览功能
2017/03/15 Javascript
Vue-input框checkbox强制刷新问题
2019/04/18 Javascript
vue-i18n结合Element-ui的配置方法
2019/05/20 Javascript
Node.js系列之安装配置与基本使用(1)
2019/08/30 Javascript
如何基于原生javaScript生成带图片的二维码
2019/11/21 Javascript
python通过pil模块获得图片exif信息的方法
2015/03/16 Python
django 通过URL访问上传的文件方法
2019/07/28 Python
Django ORM 常用字段与不常用字段汇总
2019/08/09 Python
django数据模型(Model)的字段类型解析
2019/12/25 Python
Python限制内存和CPU使用量的方法(Unix系统适用)
2020/08/04 Python
CSS3实现闪烁动画效果的方法
2015/02/09 HTML / CSS
如何整合JQuery和Prototype
2014/01/31 面试题
私用公车造成事故检讨书
2014/11/16 职场文书
辞职信怎么写?你都知道吗?
2019/06/24 职场文书
浅谈python数据类型及其操作
2021/05/25 Python
Spring Security使用单点登录的权限功能
2022/04/03 Java/Android
索尼ICF-5900W收音机测评
2022/04/24 无线电