无刷新上传文件并返回自定义值
更新时间：2015年06月11日 11:56:23 投稿：hebedich
本文给大家简单分享了一下个人项目中解决无刷新上传文件的方法和示例，有需要的小伙伴可以参考下。
今天开发过程中遇到了这样一个问题：需要将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的文件流），接收后即可进行自定义操作。
相关文章
这篇文章主要介绍了DWR3 访问WEB元素的两种方法实例详解的相关资料,需要的朋友可以参考下2017-01-01
这篇文章主要介绍了java设计模式中观察者模式，全文通过举例子及代码的形式进行了一个简单的介绍，希望大家能够理解并且学习到其中知识2021-08-08
这篇文章主要介绍了基于JavaScript伪随机正态分布代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-11-11
这篇文章主要介绍了js实现将选中值累加到文本框的方法,涉及javascript动态操作页面元素结点的相关技巧,非常简单实用,需要的朋友可以参考下2015-08-08
这篇文章主要为大家详细介绍了微信小程序实现上拉加载功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-11-11
下面小编就为大家带来一篇js 获取json数组里面数组的长度实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要介绍了JavaScript中数组去重的5种方法，文中讲解非常详细，实例代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-07-07
这篇文章主要为大家介绍了JS算法题解旋转数组方法示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
这篇文章介绍了Enter转换为Tab的小例子(兼容IE,Firefox)，有需要的朋友可以参考一下2013-11-11
JavaScript实现拖拽元素对齐到网格（每次移动固定距离）
最近在做一个拖拽元素的附加功能，就是对齐到网格，实际上就是确定好元素的初始位置，然后拖拽元素时，每次移动固定的距离。让元素都可以在网格内对齐2016-11-11
最新评论