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 相关文章推荐
return false,对阻止事件默认动作的一些测试代码
Nov 17 Javascript
JavaScript Accessor实现说明
Dec 06 Javascript
JS中怎样判断undefined(比较不错的方法)
Mar 27 Javascript
用js格式化金额可设置保留的小数位数
May 09 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Sep 26 Javascript
javascript设计模式之对象工厂函数与构造函数详解
Jul 30 Javascript
Treegrid的动态加载实例代码
Apr 29 Javascript
AngularJS 模块化详解及实例代码
Sep 14 Javascript
解决Layui数据表格中checkbox位置不居中的方法
Aug 15 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
Mar 08 Javascript
Vue formData实现图片上传
Aug 20 Javascript
原生js实现自定义滚动条
Jan 20 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中var_export与var_dump的区别分析
2010/08/21 PHP
Thinkphp的volist标签嵌套循环使用教程
2014/07/08 PHP
PHP加密解密类实例代码
2016/07/20 PHP
PHP简单创建压缩图的方法
2016/08/24 PHP
PHP使用函数用法详解
2018/09/30 PHP
在 Laravel 中动态隐藏 API 字段的方法
2019/10/25 PHP
查询绑定数据岛的表格中的文本并修改显示方式的js代码
2009/12/15 Javascript
深入解读JavaScript中的Iterator和for-of循环
2015/07/28 Javascript
JS判断图片是否加载完成方法汇总(最新版)
2016/05/13 Javascript
jQuery中ScrollTo用法示例
2016/09/04 Javascript
JS判断form内所有表单是否为空的简单实例
2016/09/09 Javascript
Javascript中call,apply,bind方法的详解与总结
2016/12/12 Javascript
js自制图片放大镜功能
2017/01/24 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
2017/09/30 Javascript
使用Angular-CLI构建NPM包的方法
2018/09/07 Javascript
vue根据进入的路由进行原路返回的方法
2018/09/26 Javascript
微信小程序自定义弹窗wcPop插件
2018/11/19 Javascript
Vue 幸运大转盘实现思路详解
2019/05/06 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
2020/08/10 Javascript
Python编程中对super函数的正确理解和用法解析
2016/07/02 Python
Python抓取框架 Scrapy的架构
2016/08/12 Python
python操作列表的函数使用代码详解
2017/12/28 Python
python 判断字符串中是否含有汉字或非汉字的实例
2019/07/15 Python
python实现银行实战系统
2020/02/26 Python
将 Ubuntu 16 和 18 上的 python 升级到最新 python3.8 的方法教程
2020/03/11 Python
Python 程序报错崩溃后如何倒回到崩溃的位置(推荐)
2020/06/23 Python
PyCharm2020.3.2安装超详细教程
2021/02/08 Python
HTML5视频支持检测(检查浏览器是否支持视频播放)
2013/06/08 HTML / CSS
英国工具中心:UK Tool Centre
2017/07/10 全球购物
linux面试题参考答案(6)
2016/06/23 面试题
行政人员岗位职责
2013/12/08 职场文书
创业计划书中包含的9个方面
2013/12/26 职场文书
2014教师研修学习体会
2014/07/08 职场文书
2014保险公司个人工作总结
2014/12/09 职场文书
详解Django的MVT设计模式
2021/04/29 Python
JavaScript 对象创建的3种方法
2021/11/17 Javascript