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...悲剧 对 ...
随机推荐
- nginx学习之反向代理篇(六)
在本节,你将学会: --如何根据不同的协议,将请求转发到后端服务器: --修改发送到后端服务器的请求头: --以及配置是否buffering从后端服务器返回来的响应. 1. 将请求转发给后端服务器 当 ...
- nginx学习之详细安装篇(二)
1. 选择稳定版还是主线版 主线版:包含最新的功能和bug修复,但该版本可能会含有一些属于实验性的模块,同时可能会有新的bug,所以如果只是做测试使用,可以使用主线版. 稳定版:不包含最新的功能,但修 ...
- can t connect to mysql server on 'localhost'解决方法
源:http://www.111cn.net/database/mysql/37700.htm 先重启服务器可解决大部分问题 错误编号:2003 问题分析: 无法连接到 mysql 服务器,可能的情况 ...
- bash: /home/aprilpeng/.bashrc: Permission denied
bash: /home/aprilpeng/.bashrc: Permission denied 出现这样的权限问题,一般是在切换用户的时候,用户没有该目录的权限 可以$chown -R git:us ...
- Kindeditor 编辑区样式结构
ke-container ke-toolbar ke-edit ke-edit-iframe ke-edit-area ke-statusbar
- Sql Server2008——存储过程编程简单例子
主要介绍: 存储过程的定义方法及其使用方法. 实例介绍: 1 创建学生表Student create database Stu use Stu go CREATE TABLE Student ( Sn ...
- 20145229吴姗珊 《Java程序设计》第4周学习总结
20145229吴姗珊 <Java程序设计>第4周学习总结 教材学习内容总结 第六章 继承与多态 6.1继承共同行为 1.继承基本上就是避免多个类间重复定义共同行为 简单的类的定义 使用s ...
- Linux电源管理(3)-Generic PM之reboot过程【转】
本文转载自:http://www.wowotech.net/pm_subsystem/reboot.html 1. 前言 在使用计算机的过程中,关机和重启是最先学会的两个操作.同样,这两个操作在Lin ...
- codeforces 466C 计数 codeforces 483B 二分 容斥
题意:给你n个数,将他们分成连续的三个部分使得每个部分的和相同,求出分法的种数. 思路:用一个数组a[i]记下从第一个点到当前i点的总和.最后一个点是总和为sum的点,只需求出总和为1/3sum的点和 ...
- oracle 从select的结果update其他表
update a set a.id=(selelct b.id from temp b where b.line = a.line) where a.line = (select line from ...