form+iframe实现ajax文件上传
在做文件上传时除了传入文件外,还有附件参数,并且要求不刷新页面,之前是表单提交的方式,现在修改成ajax上传的方式,由于没有选择用插件,所以用form+iframe的方式,并且这种方式对IE8以上及主流浏览器都支持。
1、首先写一个iframe
<iframe name="myiframe" style="display:none;" onload="iframeLoad(this)"></iframe>
2、创建文件上传的form,form的target属性值和iframe的name一致
<form id="upload" action="${webRoot }/tlTrialCalculation/doImport" method="post" enctype="multipart/form-data" target="myiframe">
<input type="hidden" name="processId" value="${processId }">
<input id="upload" type="file" name="file" size="28" onChange="uploadFile()" accept="image/jpeg,image/png"/>
</form>
3、为文件按钮编写onChange事件触发的方法
function uploadFile(){
$('#upload).submit();
}
4、编写iframe的加载完成方法,在这里处理上传成功后的操作
function iframeLoad(ifame){
var doc = iframe.contentWindow.document;
var html = doc.body.innerHTML;
html
}
form+iframe实现ajax文件上传的更多相关文章
- iframe实现Ajax文件上传效果示例
<!doctype html> <html> <head> <meta charset=utf-8> <head> <title> ...
- iframe和ajax文件上传方法
为什么使用这两种方法文件上传呢,主要是因为局部刷新问题 上传问题,主要是使用form表单,或者用请求一个文件上传 iframe 大多网站都是有一个整体的固定结构,然后进行局部刷新,我们可以使用AJAX ...
- iframe 模拟ajax文件上传and formdata ajax 文件上传
对于文件上传 有好多种方式,一直想总结 文件上传的方法 今天就来写下 iframe 的文件上传的代码 本人语言表达能里有限,不多说了 直接上代码. 首先看 总体页面. 总共就三个文件. 实际上也就是 ...
- 使用ajax提交form表单,包括ajax文件上传【转载】
[使用ajax提交form表单,包括ajax文件上传] 前言 转载:作者:https://www.cnblogs.com/zhuxiaojie/p/4783939.html 使用ajax请求数据,很多 ...
- 使用ajax提交form表单,包括ajax文件上传 转http://www.cnblogs.com/zhuxiaojie/p/4783939.html
使用ajax提交form表单,包括ajax文件上传 前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){ ... },&qu ...
- jquery.form.js官方插件介绍Form插件,支持Ajax,支持Ajax文件上传
jquery.form.js官方插件介绍Form插件,支持Ajax,支持Ajax文件上传 http://www.malsup.com/jquery/form/#getting-started [JQu ...
- Ajax(form表单文件上传、请求头之contentType、Ajax传递json数据、Ajax文件上传)
form表单文件上传 上菜 file_put.html <form action="" method="post" enctype="multi ...
- AJAX文件上传实践与分析,带HTML5文件上传API。
对于HTML5已经支持AJAX文件上传了,但如果需要兼容的话还是得用一点小技巧的,HTML5等等介绍,先来看看以前我们是怎么写的. 网上可能会有一些叫AJAX文件上传插件,但在AJAX2.0之前是不可 ...
- 兼容ie的jquery ajax文件上传
Ajax文件上传插件很多,但兼容性各不一样,许多是对ie不兼容的,另外项目中是要求将网页内容嵌入到桌面端应用的,这样就不允许带flash的上传插件了,如:jquery uploadify...悲剧 对 ...
随机推荐
- 记录-在jsp页面获取后台值在页面显示过长处理
在下面的红色标记处 后台获取的值(字符串)在页面显示过长或者与其他重叠 (xxx).cutStr(15) 15代表的是展示字符串的长度 data.rows[i].avgPrice, ), data.r ...
- mac 地址分配
https://regauth.standards.ieee.org/standards-ra-web/pub/view.html#registries 34:96:72:3c:5d:d6mac 地址 ...
- 换教室(期望+DP)
换教室(期望+DP) \(dp(i,j,1/0)\)表示第\(i\)节课,申请了\(j\)次调换,这节课\(1/0\)调换. 换教室 转移的时候考虑: 上次没申请 这次也没申请 加上\(dis(fr[ ...
- struts自定义拦截器实现
示例 添加新功能:只有是登录的状态访问hello_loginSuccess才会显示登录成功. index.jsp登录成功页面 test.jsp登录页面 一.修改原代码实现 1.登录后将登录信息添加到S ...
- scikit-learn(project中用的相对较多的模型介绍):1.14. Semi-Supervised
參考:http://scikit-learn.org/stable/modules/label_propagation.html The semi-supervised estimators insk ...
- JDBC【菜鸟学JAVA】
1:首先下载sqljdbc.jar,然后配置ClassPath,然后再在工程文件中把这个(sqljdbc.jar)架包引用上,就可以开始JAVA操作之旅了 打开Eclipse,“文件”→“新建”→“项 ...
- web audio living
总结网页音频直播的方案和遇到的问题. 代码:(github,待整理) 结果: 使用opus音频编码,web audio api 播放,可以达到100ms以内延时,高质量,低流量的音频直播. 背景: V ...
- Struts2学习总结(完整版)
一.搭建struts2环境 1.jar包的导入 主要是到 解压其中的一个工程,得到里面lib下包含的jar包 把这里的所有的jar包拷贝到项目的 WEB-INF目录下的lib文件夹下面. 2.配置st ...
- Mysql——JDBC编程 理论介绍
一.JDBC简介(来自俞琰--数据库老师) Java数据库编程主要使用JDBC技术.JDBC是一种用于执行SQL语句的Java API.它由一组用Java编写的类和接口组成.JDBC为开发人员提供了一 ...
- 双向链表(C++实现)
////////////////////////////////////////////////////////////////////////////////////// /////// 这里建立两 ...