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


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 相关文章推荐
js option删除代码集合
Nov 12 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
Feb 12 Javascript
点击显示指定元素隐藏其他同辈元素的方法
Feb 19 Javascript
JS中dom0级事件和dom2级事件的区别介绍
May 05 Javascript
浅谈JavaScript异步编程
Jan 20 Javascript
JavaScript之DOM_动力节点Java学院整理
Jul 03 Javascript
React Native中的RefreshContorl下拉刷新使用
Oct 09 Javascript
vue实现手机号码抽奖上下滚动动画示例
Oct 18 Javascript
Node.js引入UIBootstrap的方法示例
May 11 Javascript
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
实例分析javascript中的异步
Jun 02 Javascript
vue实现简单加法计算器
Oct 22 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实现的验证码文件类实例
2015/06/18 PHP
smarty循环嵌套用法示例分析
2016/07/19 PHP
Laravel 5.3 学习笔记之 安装
2016/08/28 PHP
php图像验证码生成代码
2017/06/08 PHP
PHP使用SMTP邮件服务器发送邮件示例
2018/08/28 PHP
JavaScript 异步调用框架 (Part 1 - 问题 &amp; 场景)
2009/08/03 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
2013/05/15 Javascript
轻松创建nodejs服务器(6):作出响应
2014/12/18 NodeJs
jQuery实现自动滚动到页面顶端的方法
2015/05/22 Javascript
使用JavaScript刷新网页的方法
2015/06/04 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
2015/07/27 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
2015/10/31 Javascript
JavaScript代码性能优化总结(推荐)
2016/05/16 Javascript
模板视图和AngularJS之间冲突的解决方法
2016/11/22 Javascript
Angularjs 1.3 中的$parse实例代码
2017/09/14 Javascript
从源码看angular/material2 中 dialog模块的实现方法
2017/10/18 Javascript
详解为生产环境编译Angular2应用的方法
2018/12/10 Javascript
element实现合并单元格通用方法
2019/11/13 Javascript
Python3.2中Print函数用法实例详解
2015/05/19 Python
python根据日期返回星期几的方法
2015/07/06 Python
深入理解python中的atexit模块
2017/03/07 Python
Python学习小技巧之利用字典的默认行为
2017/05/20 Python
python实现感知器算法(批处理)
2019/01/18 Python
python多任务及返回值的处理方法
2019/01/22 Python
python实现最小二乘法线性拟合
2019/07/19 Python
flask框架配置mysql数据库操作详解
2019/11/29 Python
Pytorch自定义Dataset和DataLoader去除不存在和空数据的操作
2021/03/03 Python
CSS3线性渐变简单实现以及该属性在浏览器中的不同
2012/12/12 HTML / CSS
澳大利亚宠物食品和用品商店:PETstock
2020/01/02 全球购物
国家励志奖学金获奖感言
2014/01/09 职场文书
趣味比赛活动方案
2014/02/15 职场文书
2014党的群众路线教育实践活动总结报告
2014/10/31 职场文书
实习指导教师评语
2014/12/30 职场文书
研究生导师推荐信
2015/03/25 职场文书
心术观后感
2015/06/11 职场文书
MySQL的全局锁和表级锁的具体使用
2021/08/23 MySQL