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

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

　　页面代码如下：

1
2
3
4
5

<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)：

1
2
3
4
5
6
7
8
9
10
11

$(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的文件流），接收后即可进行自定义操作。

时间： 2024-10-02 14:18:38

无刷新上传文件并返回自定义值的相关文章

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

今天开发过程中遇到了这样一个问题:需要将Excel上传至服务器进行解析,但是在文档不合适的情况下希望可以不刷新页面提示用户文档不合适.冥思苦想了半天,在网上找了不少资料最终试验成功,在此分享下处理方法: 首先先说下处理思路:在页面上添加一个隐藏的iframe,设置form表单的target属性设置为iframe的id,这样form提交时会将excel文件以文件流的形式传到后台,在后台接收后可进行自定义操作,之后返回的信息将显示在iframe中而不进行跳转,iframe之前设置为隐藏,所以页面不会

谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法_javascript技巧

发请求有两种方式,一种是用ajax,另一种是用form提交,默认的form提交如果不做处理的话,会使页面重定向.以一个简单的demo做说明:      html如下所示,请求的路径action为"upload",其它的不做任何处理: <form method="POST" action="upload" enctype="multipart/form-data"> 名字 <input type="t

请问使用iframe进行无刷新上传文件时，好像没有效果？

问题描述 请问使用iframe进行无刷新上传文件时,好像没有效果? 在网上找了关于iframe 无刷新上传文件,上传时没有反应,这一般是什么原因?会不会是浏览器的原因啊? 解决方案 你代码有问题..和浏览器没关系.如果你跨域上传文件,是无法获取iframe里面的内容的 给iframe添加onload事件,获取iframe里面额返回值进行判断,不要依赖动态页返回的内容,要不如果动态页报错没有输出js回调或者提示信息就和没反应一样了

利用iframe无刷新上传文件的坑

原文:利用iframe无刷新上传文件的坑 页面里经常要用到文件上传的功能,而且要求页面不刷新,先说一下原理:页面里放一个file控件和submit按钮,外面用form表单包住,给form表单加上对应的属性值,action.method.entype.name,到这一步,能上传文件了,但是这样上传文件会刷新页面,这不是我们想要的.我们要的是文件上传时不刷新页面,那么也简单,在页面里放一个iframe,设置它的宽高为0,这里有两个坑: 1.需要设置iframe的name值与form的target属性

php+iframe实现隐藏无刷新上传文件_php实例

首先ajax不能上传文件,这误导了我有段时间,今晚睡不着就照着说明做了个无刷新上传文件 其实原理很简单 复制代码 代码如下: <form enctype="multipart/form-data" method="POST" target="upload" action="http://localhost/class.upload.php" > <input type="file" nam

jsp+ajax实现无刷新上传文件的方法_AJAX相关

本文实例讲述了jsp+ajax实现无刷新上传文件的方法.分享给大家供大家参考,具体如下: 列表页:selectaddress.jsp js页:ajax_edit.js jsp处理页:editaddress.jsp 上传工具类:UploadUtil.java 思想:由于安全问题,javascript操纵不了文件, 导致ajax不能动态上传文件,所以选择了iframe, 列表页把form表单提交到一个隐式的iframe里面,设置表单的属性 复制代码 代码如下: enctype='multipart/

ajax实现无刷新上传文件功能

本文实例为大家分享了ajax实现无刷新上传文件功能的具体代码,供大家参考,具体内容如下 详细代码如下 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>ajax无刷新上传文件</title> <script> window.o

javascript实现iframe无刷新上传文件

许多系统都会有上传图片这个功能,但是如果是用form表单提交的话,每次都会刷新页面,这样体验很不好: 今天分享一个利用iframe实现无刷新上传文件的方法,直接上代码: html <form class="form-horizontal text-sm" id="upload" name="upload[]" target="frm" action="/ERP/files/upFiles" metho

PHP无刷新上传文件实现代码

index.html <html> <head> <title>无刷新上传文件</title> <meta Content-type="text/html" charset="utf-8" /> <script type="text/javascript"> function startUpload() { document.getElementById('processin