无刷新上传文件并返回自定义值


Posted in Javascript onJune 11, 2015

今天开发过程中遇到了这样一个问题:需要将Excel上传至服务器进行解析,但是在文档不合适的情况下希望可以不刷新页面提示用户文档不合适。冥思苦想了半天,在网上找了不少资料最终试验成功,在此分享下处理方法:

首先先说下处理思路:在页面上添加一个隐藏的iframe,设置form表单的target属性设置为iframe的id,这样form提交时会将excel文件以文件流的形式传到后台,在后台接收后可进行自定义操作,之后返回的信息将显示在iframe中而不进行跳转,iframe之前设置为隐藏,所以页面不会有变化,然后我们需要监听iframe内容的变化,然后将内容传入主窗口中的JS方法进行下一步的自定义处理。

页面代码如下:

<form id="input" action="importExcel.jhtml" method="post" enctype="multipart/form-data" target="hiddenIFrame">
<input id="excelFile" name="file" type="file" />

<input type="submit" class="button" value="导入excel"/>
</form>
<iframe id='hiddenIFrame' name='hiddenIFrame' style="display:none;"></iframe>

JS代码如下(需引入jqeury):

$(function(){
  $("#hiddenIFrame").load(function(){
    var wnd = this.contentWindow;
    var str = $(wnd.document.body).html();
    callback(str);
  });
})
 
function callback(info){
  alert(info);
}

 后台代码就不过多介绍了与传统提交一样,后台会根据input组件的name值获取到一个同名的文件流(例如上面页面代码中input组件的name是file,那么后台接收到的是一个名字叫file的文件流),接收后即可进行自定义操作。

Javascript 相关文章推荐
Javascript 汉字字节判断
Aug 01 Javascript
jQuery对象和Javascript对象之间转换的实例代码
Mar 20 Javascript
js控制输入框获得和失去焦点时状态显示的方法
Jan 30 Javascript
详谈javascript中DOM的基本属性
Feb 26 Javascript
基于JavaScript实现一定时间后去执行一个函数
Dec 14 Javascript
js中flexible.js实现淘宝弹性布局方案
Jun 23 Javascript
AngularJS学习笔记之依赖注入详解
May 16 Javascript
Bootstrap所支持的表单控件实例详解
May 16 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
Aug 11 Javascript
详解微信小程序审核不通过的解决方法
Jan 17 Javascript
纯js封装的ajax功能函数与用法示例
May 14 Javascript
uni-app实现点赞评论功能
Nov 25 Javascript
JavaScript中setMonth()方法的使用详解
Jun 11 #Javascript
JS制作手机端自适应缩放显示
Jun 11 #Javascript
实现placeholder效果的方案汇总
Jun 11 #Javascript
在JavaScript中处理时间之setMinutes()方法的使用
Jun 11 #Javascript
JavaScript中的setMilliseconds()方法使用详解
Jun 11 #Javascript
jQuery使用drag效果实现自由拖拽div
Jun 11 #Javascript
javascript 常见功能汇总
Jun 11 #Javascript
You might like
调试PHP程序的多种方法介绍
2014/11/06 PHP
php解析xml方法实例详解
2015/05/12 PHP
PHP安装扩展mcrypt以及相关依赖项深入讲解
2021/03/04 PHP
js弹出窗口之弹出层的小例子
2013/06/17 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
2013/07/15 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
2014/08/18 Javascript
JQuery右键菜单插件ContextMenu使用指南
2014/12/19 Javascript
Underscore.js 1.3.3 中文注释翻译说明
2015/06/25 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
2015/08/07 Javascript
Vue插件写、用详解(附demo)
2017/03/20 Javascript
js获取css的各种样式并且设置他们的方法
2017/08/22 Javascript
JS使用new操作符创建对象的方法分析
2019/05/30 Javascript
ES6中Symbol、Set和Map用法详解
2019/08/20 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
2020/05/18 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
2021/01/11 Javascript
[01:24:09]Ti4 冒泡赛第二轮DK vs C9 1
2014/07/14 DOTA
[47:08]OG vs INfamous 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
让 python 命令行也可以自动补全
2014/11/30 Python
Python缩进和冒号详解
2016/06/01 Python
利用Tkinter(python3.6)实现一个简单计算器
2017/12/21 Python
python如何实现反向迭代
2018/03/20 Python
python在每个字符后添加空格的实例
2018/05/07 Python
详解python持久化文件读写
2019/04/06 Python
解决Python3 控制台输出InsecureRequestWarning问题
2019/07/15 Python
python带参数打包exe及调用方式
2019/12/21 Python
H5仿微信界面教程(一)
2017/07/05 HTML / CSS
迪斯尼商品官方网站:ShopDisney
2016/08/01 全球购物
金蝶的一道SQL笔试题
2012/12/18 面试题
高中英语演讲稿范文
2014/04/24 职场文书
应届生自荐信
2014/06/30 职场文书
物流专业专科生职业生涯规划书
2014/09/14 职场文书
公司财务经理岗位职责
2015/04/08 职场文书
撤诉状格式范本
2015/05/19 职场文书
飞屋环游记观后感
2015/06/08 职场文书
Python并发编程实例教程之线程的玩法
2021/06/20 Python
JavaWeb 入门篇(3)ServletContext 详解 具体应用
2021/07/16 Java/Android