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...悲剧 对 ...
随机推荐
- MySQL 数据库事物隔离级别的设置
select @@tx_isolation; //查看隔离级别 set session transaction isolation level read uncommitted; //设置读未提交级别 ...
- URAL 1181 Cutting a Painted Polygon【递归+分治】
题目: http://acm.timus.ru/problem.aspx?space=1&num=1181 http://acm.hust.edu.cn/vjudge/contest/view ...
- CentOS查看和修改MySQL字符集
通过以下命令查看了MySQL的字符集 连接上mysql服务,输入以下命令 mysql>show variables like 'character_set%'; 显示如下: 为了让MySQL支持 ...
- Js遍历对象中的属性
var obj = {"name": "xiaol","age":"18"} for(var attr in obj){ ...
- 【深度学习】ubuntu16.04下安装opencv3.4.0
1.首先安装一些编译工具 # 安装编译工具 sudo apt-get install build-essential # 安装依赖包 sudo apt-get install cmake git li ...
- 读paper:Deep Convolutional Neural Network using Triplets of Faces, Deep Ensemble, andScore-level Fusion for Face Recognition
今天给大家带来一篇来自CVPR 2017关于人脸识别的文章. 文章题目:Deep Convolutional Neural Network using Triplets of Faces, Deep ...
- linux基础part1
linux基础部分一 一.linux简介 1.Linux的定义:Linux是一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX和UNIX的多用户.多任务.支持多线程和多CPU的操作系统. ...
- Video Brightness Enhancement
Tone Mapping原是摄影学中的一个术语,因为打印相片所能表现的亮度范围不足以表现现实世界中的亮度域,而如果简单的将真实世界的整个亮度域线性压缩到照片所能表现的亮度域内,则会在明暗两端同时丢失很 ...
- SparkRDD内核
Spark内核 RDD是基础,是spark中一个基础的抽象,是不可变的,比如我们加载进的数据RDD,如果想更改其中的内容是不允许的:分区的集合,可以并行来计算:RDD类中包含了很多基础的操作,例如ma ...
- 大话设计模式--中介者模式 Mediator --C++实现实例
1. 中介者模式: 用一个中介对象来封装一系列的对象交互,中介者使各对象不需要显式地相互引用,从而使其耦合松散,而且可以独立改变他们之间的交互. Mediator的出现减少了各个Colleague的耦 ...