在做文件上传时除了传入文件外,还有附件参数,并且要求不刷新页面,之前是表单提交的方式,现在修改成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文件上传的更多相关文章

  1. iframe实现Ajax文件上传效果示例

    <!doctype html> <html> <head> <meta charset=utf-8> <head> <title> ...

  2. iframe和ajax文件上传方法

    为什么使用这两种方法文件上传呢,主要是因为局部刷新问题 上传问题,主要是使用form表单,或者用请求一个文件上传 iframe 大多网站都是有一个整体的固定结构,然后进行局部刷新,我们可以使用AJAX ...

  3. iframe 模拟ajax文件上传and formdata ajax 文件上传

    对于文件上传 有好多种方式,一直想总结 文件上传的方法 今天就来写下 iframe  的文件上传的代码 本人语言表达能里有限,不多说了 直接上代码. 首先看 总体页面. 总共就三个文件. 实际上也就是 ...

  4. 使用ajax提交form表单,包括ajax文件上传【转载】

    [使用ajax提交form表单,包括ajax文件上传] 前言 转载:作者:https://www.cnblogs.com/zhuxiaojie/p/4783939.html 使用ajax请求数据,很多 ...

  5. 使用ajax提交form表单,包括ajax文件上传 转http://www.cnblogs.com/zhuxiaojie/p/4783939.html

    使用ajax提交form表单,包括ajax文件上传 前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){ ... },&qu ...

  6. jquery.form.js官方插件介绍Form插件,支持Ajax,支持Ajax文件上传

    jquery.form.js官方插件介绍Form插件,支持Ajax,支持Ajax文件上传 http://www.malsup.com/jquery/form/#getting-started [JQu ...

  7. Ajax(form表单文件上传、请求头之contentType、Ajax传递json数据、Ajax文件上传)

    form表单文件上传 上菜 file_put.html <form action="" method="post" enctype="multi ...

  8. AJAX文件上传实践与分析,带HTML5文件上传API。

    对于HTML5已经支持AJAX文件上传了,但如果需要兼容的话还是得用一点小技巧的,HTML5等等介绍,先来看看以前我们是怎么写的. 网上可能会有一些叫AJAX文件上传插件,但在AJAX2.0之前是不可 ...

  9. 兼容ie的jquery ajax文件上传

    Ajax文件上传插件很多,但兼容性各不一样,许多是对ie不兼容的,另外项目中是要求将网页内容嵌入到桌面端应用的,这样就不允许带flash的上传插件了,如:jquery uploadify...悲剧 对 ...

随机推荐

  1. android菜鸟学习笔记20----Android数据存储(四))Android数据库操作

    Android内置了一个名为SQLite的关系型数据库,这是一款轻量型的数据库,操作十分简便.SQLite与别的数据库不同的是,它没有数据类型.可以保存任何类型的数据到你所想要保存的任何表的任何列中. ...

  2. Activiti使用过程_1

    1 微信公众号:

  3. 排序算法-python版

    总结了一下常见集中排序的算法 归并排序 归并排序也称合并排序,是分治法的典型应用.分治思想是将每个问题分解成个个小问题,将每个小问题解决,然后合并. 具体的归并排序就是,将一组无序数按n/2递归分解成 ...

  4. 使用svn diff的-r参数的来比较任意两个版本的差异

    1 svn diff的用法1.1 对比当前本地的工作拷贝文件(working copy)和缓存在.svn下的版本库文件的区别 svn diff 1.2 对比当前本地的工作拷贝文件(working co ...

  5. ll指令输出解析

    从左到右: 文件属性 共有10-11位,分别表示: 1.表示目标属性,d目录,l连结文件,-文件 2-4,owner权限,顺序为: r可读.w可写.x可执行,例如: rwx可读写执行,rw-可读写不能 ...

  6. DEDE 列表页调用如 标题,时间,简介等

    以下是直接从板子中复制出来的,CSS自已根据需要写下就行.在调时简介长度不知道怎么控制,现在说下方法1. infolen='30' 这个可以2. 系统设置 >其它设置 >内容简介长度填下就 ...

  7. Linux iptables 从入门到放弃

    iptables表(iptables)和链(chains)    描述完iptables术语后,相信大家对iptables的表和链有了初步的了解.默认情况下,Iptables根据功能和表的定义划分包含 ...

  8. Luogu-2521 [HAOI2011]防线修建

    倒过来处理所有询问,就变成了一道动态凸包的裸题 吐槽一下这道题只要维护上凸壳就好了,我zz了没好好看题打了两个2333 // luogu-judger-enable-o2 #include<se ...

  9. 算法(Algorithms)第4版 练习 1.5.9

    不可能.如果是weighted quick-union的话,6的父节点应该是5,而不是5的父节点是6.

  10. Spark- Spark基本工作原理

    Spark特点: 1.分布式 spark读取数据时是把数据分布式存储到各个节点内存中 2.主要基于内存(少数情况基于磁盘,如shuffle阶段) 所有计算操作,都是针对多个节点上内存的数据,进行并行操 ...