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


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活用事件触发对象动作
Aug 10 Javascript
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
Jan 09 Javascript
向当前style sheet中插入一个新的style实现方法
Apr 01 Javascript
jquery.idTabs 选项卡使用示例代码
Sep 03 Javascript
jQuery老黄历完整实现方法
Jan 16 Javascript
Javascript基础教程之while语句
Jan 18 Javascript
JS继承用法实例分析
Feb 05 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
Jul 01 Javascript
基于jquery实现人物头像跟随鼠标转动
Aug 23 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
Jul 15 Javascript
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
vue请求服务器数据后绑定不上的解决方法
Oct 30 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
javascript sudoku 数独智力游戏生成代码
2010/03/27 Javascript
javascript preload&amp;lazy load
2010/05/13 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
2012/08/09 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
2013/06/17 Javascript
javascript用户注册提示效果的简单实例
2013/08/17 Javascript
JavaScript实现的使用键盘控制人物走动实例
2014/08/27 Javascript
使用mini-define实现前端代码的模块化管理
2014/12/25 Javascript
jQuery实现图片局部放大镜效果
2016/03/17 Javascript
使用jQuery处理AJAX请求的基础学习教程
2016/05/10 Javascript
Bootstrap 布局组件(全)
2016/07/18 Javascript
jQuery Easyui快速入门教程
2016/08/21 Javascript
React组件之间的通信的实例代码
2017/06/27 Javascript
你应该知道的几类npm依赖包管理详解
2017/10/06 Javascript
vue中SPA单页面应用程序详解
2017/11/07 Javascript
Node.js 使用AngularJS的方法示例
2018/05/11 Javascript
解决vue数组中对象属性变化页面不渲染问题
2018/08/09 Javascript
单页面vue引入百度统计的使用方法示例详解
2018/10/13 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
2018/12/09 Javascript
Vue 动态组件与 v-once 指令的实现
2019/02/12 Javascript
新手简单了解vue
2019/05/29 Javascript
JavaScript编码小技巧分享
2020/09/17 Javascript
Python ORM框架SQLAlchemy学习笔记之关系映射实例
2014/06/10 Python
python结合selenium获取XX省交通违章数据的实现思路及代码
2016/06/26 Python
python音频处理用到的操作的示例代码
2017/10/27 Python
用Python将结果保存为xlsx的方法
2019/01/28 Python
python爬取代理ip的示例
2020/12/18 Python
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
2020/04/27 HTML / CSS
Bonami斯洛伐克:购买家具和家居饰品
2019/07/02 全球购物
Carmen Sol官网:购买果冻鞋、手袋和配件
2021/01/01 全球购物
业务总经理岗位职责
2014/02/03 职场文书
硕士生工作推荐信
2014/03/07 职场文书
革命英雄事迹演讲稿
2014/09/13 职场文书
幼儿园大班毕业评语
2014/12/31 职场文书
公司年夜饭通知
2015/04/25 职场文书
一篇合格的广告文案,其主要目的是什么?
2019/07/12 职场文书
sql通过日期判断年龄函数的示例代码
2021/07/16 SQL Server