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...悲剧 对 ...
随机推荐
- 九度OJ 1340:小A的计算器 (进制转换)
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:735 解决:202 题目描述: 以往的操作系统内部的数据表示都是二进制方式,小A新写了一个操作系统,系统内部的数据表示为26进制,其中0-2 ...
- 九度OJ 1193:矩阵转置 (矩阵计算)
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:1673 解决:1132 题目描述: 输入一个N*N的矩阵,将其转置后输出.要求:不得使用任何数组(就地逆置). 输入: 输入的第一行包括一个 ...
- 九度OJ 1188:约瑟夫环 (约瑟夫环)
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:1891 解决:817 题目描述: N个人围成一圈顺序编号,从1号开始按1.2.3......顺序报数,报p者退出圈外,其余的人再从1.2.3 ...
- They're much closer in spirit to how our brains work than feedforward networks.
http://neuralnetworksanddeeplearning.com/chap1.html Up to now, we've been discussing neural networks ...
- On the importance of initialization and momentum in deep learning
Ilya Sutskever1 ilyasu@google.com James Martens jmartens@cs.toronto.edu George Dahl gdahl@cs.toronto ...
- PAT 1062. 最简分数(20)
一个分数一般写成两个整数相除的形式:N/M,其中M不为0.最简分数是指分子和分母没有公约数的分数表示形式. 现给定两个不相等的正分数 N1/M1 和 N2/M2,要求你按从小到大的顺序列出它们之间分母 ...
- dockerfile nginx配置
Dockerfile 代码 From hub.c.163.com/public/nginx:1.2.1 RUN rm -v /etc/nginx/nginx.conf ADD nginx.conf / ...
- 【windows】远程桌面报错:由于CredSSP加密Oracle修正
对于windows家庭版用户,无法打开gepdit.msc需要手动修改注册表 创建红色部分目录 [HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\Curre ...
- LeetCode:乘法表中的第K小的数【668】
LeetCode:乘法表中的第K小的数[668] 题目描述 几乎每一个人都用 乘法表.但是你能在乘法表中快速找到第k小的数字吗? 给定高度m .宽度n 的一张 m * n的乘法表,以及正整数k,你需要 ...
- 每天一个Linux命令(27)gzip命令
zip命令用来压缩文件.gzip是个使用广泛的压缩程序,文件经它压缩过后,其名称后面会多处“.gz”扩展名. (1)用法: 用法: gzip [选项参数][-s <压缩字尾字符 ...