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 相关文章推荐
如何在标题栏显示框架内页面的标题
Feb 03 Javascript
获取焦点时,利用js定时器设定时间执行动作
Apr 02 Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
Feb 26 Javascript
Javascript代码在页面加载时的执行顺序介绍
May 03 Javascript
JavaScript支持的最大递归调用次数分析
Jun 24 Javascript
深入浅析JS Function()构造函数
Aug 22 Javascript
bootstrap表格分页实例讲解
Dec 30 Javascript
完美实现js焦点轮播效果(一)
Mar 07 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
Apr 27 Javascript
vue配置多页面的实现方法
May 22 Javascript
记一次vue去除#问题处理经过小结
Jan 24 Javascript
js实现星星海特效的示例
Sep 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学习笔记之一
2011/01/17 PHP
关于查看MSSQL 数据库 用户每个表 占用的空间大小
2013/06/21 PHP
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
将FCKeditor导入PHP+SMARTY的实现方法
2015/01/15 PHP
php定义参数数量可变的函数用法实例
2015/03/16 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
Raphael带文本标签可拖动的图形实现代码
2013/02/20 Javascript
JQuery弹出层示例可自定义
2014/05/19 Javascript
详解Document.Cookie
2015/12/25 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
2016/03/28 Javascript
深入理解JavaScript函数参数(推荐)
2016/07/26 Javascript
js实现文字向上轮播功能
2017/01/13 Javascript
Bootstrap表单制作代码
2017/03/17 Javascript
Node.js readline 逐行读取、写入文件内容的示例
2018/03/01 Javascript
微信小程序 授权登录详解(附完整源码)
2019/08/23 Javascript
Flutter实现仿微信底部菜单栏功能
2019/09/18 Javascript
将图片文件嵌入到wxpython代码中的实现方法
2014/08/11 Python
Python判断列表是否已排序的各种方法及其性能分析
2016/06/20 Python
回调函数的意义以及python实现实例
2017/06/20 Python
Python处理菜单消息操作示例【基于win32ui模块】
2018/05/09 Python
Python异常的检测和处理方法
2018/10/26 Python
python requests.post带head和body的实例
2019/01/02 Python
使用python实现回文数的四种方法小结
2019/11/24 Python
python 二维矩阵转三维矩阵示例
2019/11/30 Python
python Tensor和Array对比分析
2020/01/08 Python
英国人最爱的饰品网站:Accessorize
2016/08/22 全球购物
Kidsroom台湾:来自德国的婴儿用品
2017/12/11 全球购物
加拿大高尔夫超市:Golf Town
2018/01/12 全球购物
中国一家专注拼团的社交购物网站:拼多多
2018/06/13 全球购物
构造方法和其他方法的区别
2016/04/26 面试题
财务会计专业应届毕业生求职信
2013/10/18 职场文书
会计岗位职责范本
2014/03/07 职场文书
妇女干部培训方案
2014/05/12 职场文书
大学生毕业个人总结
2015/02/15 职场文书
JavaScript 原型与原型链详情
2021/11/02 Javascript
源码分析Redis中 set 和 sorted set 的使用方法
2022/03/22 Redis