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 innerHTML 的一些问题的解决方法
Jun 22 Javascript
解析javascript 数组以及json元素的添加删除
Jun 26 Javascript
JQuery each()嵌套使用小结
Apr 18 Javascript
Javascript编程中几种继承方式比较分析
Nov 28 Javascript
微信小程序之ES6与事项助手的功能实现
Nov 30 Javascript
JavaScript实现打地鼠小游戏
Apr 23 Javascript
Node.js连接Sql Server 2008及数据层封装详解
Aug 27 Javascript
element-ui 时间选择器限制范围的实现(随动)
Jan 09 Javascript
vue.js高德地图实现热点图代码实例
Apr 18 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
May 02 Javascript
ES6函数和数组用法实例分析
May 23 Javascript
vue实现简单数据双向绑定
Apr 28 Vue.js
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使用google地图应用实例
2014/12/31 PHP
php简单实现MVC
2015/02/05 PHP
Laravel执行migrate命令提示:No such file or directory的解决方法
2016/03/16 PHP
PHP操作XML中XPath的应用示例
2019/07/04 PHP
PHP中abstract(抽象)、final(最终)和static(静态)原理与用法详解
2020/06/05 PHP
JavaScript中用toString()方法返回时间为字符串
2015/06/12 Javascript
JavaScript判断undefined类型的正确方法
2015/06/30 Javascript
js仿搜狐视频记录片列表展示效果
2020/05/30 Javascript
react.js使用webpack搭配环境的入门教程
2017/08/14 Javascript
JS Testing Properties 判断属性是否在对象里的方法
2017/10/01 Javascript
vue iview组件表格 render函数的使用方法详解
2018/03/15 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
2018/07/06 Javascript
nodejs基础之常用工具模块util用法分析
2018/12/26 NodeJs
微信小程序图片自适应实现解析
2020/01/21 Javascript
JavaScript如何使用插值实现图像渐变
2020/06/28 Javascript
[02:52]2014DOTA2西雅图国际邀请赛 CIS战队巡礼
2014/07/07 DOTA
[08:53]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS 选手采访
2021/03/11 DOTA
python thread 并发且顺序运行示例
2009/04/09 Python
python复制与引用用法分析
2015/04/08 Python
python中json格式数据输出的简单实现方法
2016/10/31 Python
python 用for循环实现1~n求和的实例
2019/02/01 Python
pytorch实现用Resnet提取特征并保存为txt文件的方法
2019/08/20 Python
pytorch 模拟关系拟合——回归实例
2020/01/14 Python
python如何安装下载后的模块
2020/07/03 Python
Python tkinter之Bind(绑定事件)的使用示例
2021/02/05 Python
解决pycharm修改代码后第一次运行不生效的问题
2021/02/06 Python
Html5新特性用canvas标签画多条直线附效果截图
2014/06/30 HTML / CSS
JACK & JONES瑞典官方网站:杰克琼斯欧式风格男装
2017/12/23 全球购物
毕业生自荐书模版
2014/01/04 职场文书
计算机通信专业推荐信
2014/02/22 职场文书
签约仪式主持词
2014/03/19 职场文书
大学新学期计划书
2014/04/28 职场文书
舞蹈专业求职信
2014/06/13 职场文书
小学综合实践活动总结
2014/07/07 职场文书
人工作失职检讨书
2015/05/05 职场文书
详解TypeScript中的类型保护
2021/04/29 Javascript