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...悲剧 对 ...
随机推荐
- spring boot ajax post 前后端
1 传输的数据格式是json 1.1 前端ajax json的所有的key都必须是双引号引用的,并且最外层也要用双引号引用.例如 "{"a":b, "b&quo ...
- 京东android面试题(2018 顶级互联网公司面试题系列)
以下来自于北京的一个兄弟的面试题 1.静态内部类和非静态内部类有什么区别 2.谈谈你对java多态的理解 3.如何开启线程,run和runnable有什么区别 4.线程池的好处 5.说一下你知 ...
- python 列表中字符串排序故事一则
a = ["bca","cab","abc"] 有时候需要对列表排序 如果是对列表中整个元素 直接用sort()排序 如果想按元素的某一段排 ...
- 被学长教会的高斯消元法Gauss
昨天学长教了我高斯消元法. 这里用一个栗子来模拟一下Gauss的流程. 真的通俗易懂!这里是洛谷题目链接. 这就是例子 x-2y+3z= 4x-5y+6z= 7x-8y+10z= 先将它转化为矩阵 - ...
- 2.Django命令行工具搭建项目(django-admin.py & manage.py)
1.概念: django-admin.py是django的用于管理任务的命令行工具 manage.py是对django-admin.py的简单包装,每个project里会有一个自己的manage.py ...
- Oracle视图传递参数
在Oracle里,视图不像存储过程和函数一样,可以定义输入参数,但我们可以变个方式,使用程序包来实现. oracle package: oracle package是oracle包,是一组相关过程.函 ...
- 利用java servlet实现简单的web请求过滤和跳转
今日有两个微信web项目合并了,但是还有些链接指向废弃的项目,另外不想在服务器上运行两份相同web项目(1.影响性能.2.维护升级容易出错),因此决定写一个简单链接跳转的项目,spring的filte ...
- UVALive - 6257 K - Chemist's vows 【DFS】【BFS】【DP】
题目链接 https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_ ...
- HDU - 1003 Max Sum 【DP】
题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=1003 题意 给出一个序列 要求找出一个和最大的子序列 思路 O(N)的做法 但是要标记 子序列的头部位 ...
- 20145210姚思羽《网络对抗技术》逆向及Bof基础实践
20145210姚思羽<网络对抗技术>逆向及Bof基础实践 实践目标 1.本次实践的对象是一个名为pwn1的linux可执行文件. 2.该程序正常执行流程是:main调用foo函数,foo ...