在做文件上传时除了传入文件外,还有附件参数,并且要求不刷新页面,之前是表单提交的方式,现在修改成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. 记录-在jsp页面获取后台值在页面显示过长处理

    在下面的红色标记处 后台获取的值(字符串)在页面显示过长或者与其他重叠 (xxx).cutStr(15) 15代表的是展示字符串的长度 data.rows[i].avgPrice, ), data.r ...

  2. mac 地址分配

    https://regauth.standards.ieee.org/standards-ra-web/pub/view.html#registries 34:96:72:3c:5d:d6mac 地址 ...

  3. 换教室(期望+DP)

    换教室(期望+DP) \(dp(i,j,1/0)\)表示第\(i\)节课,申请了\(j\)次调换,这节课\(1/0\)调换. 换教室 转移的时候考虑: 上次没申请 这次也没申请 加上\(dis(fr[ ...

  4. struts自定义拦截器实现

    示例 添加新功能:只有是登录的状态访问hello_loginSuccess才会显示登录成功. index.jsp登录成功页面 test.jsp登录页面 一.修改原代码实现 1.登录后将登录信息添加到S ...

  5. scikit-learn(project中用的相对较多的模型介绍):1.14. Semi-Supervised

    參考:http://scikit-learn.org/stable/modules/label_propagation.html The semi-supervised estimators insk ...

  6. JDBC【菜鸟学JAVA】

    1:首先下载sqljdbc.jar,然后配置ClassPath,然后再在工程文件中把这个(sqljdbc.jar)架包引用上,就可以开始JAVA操作之旅了 打开Eclipse,“文件”→“新建”→“项 ...

  7. web audio living

    总结网页音频直播的方案和遇到的问题. 代码:(github,待整理) 结果: 使用opus音频编码,web audio api 播放,可以达到100ms以内延时,高质量,低流量的音频直播. 背景: V ...

  8. Struts2学习总结(完整版)

    一.搭建struts2环境 1.jar包的导入 主要是到 解压其中的一个工程,得到里面lib下包含的jar包 把这里的所有的jar包拷贝到项目的 WEB-INF目录下的lib文件夹下面. 2.配置st ...

  9. Mysql——JDBC编程 理论介绍

    一.JDBC简介(来自俞琰--数据库老师) Java数据库编程主要使用JDBC技术.JDBC是一种用于执行SQL语句的Java API.它由一组用Java编写的类和接口组成.JDBC为开发人员提供了一 ...

  10. 双向链表(C++实现)

    ////////////////////////////////////////////////////////////////////////////////////// /////// 这里建立两 ...