在做文件上传时除了传入文件外,还有附件参数,并且要求不刷新页面,之前是表单提交的方式,现在修改成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. 九度OJ 1214:丑数 (整除)

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:2180 解决:942 题目描述: 把只包含因子2.3和5的数称作丑数(Ugly Number).例如6.8都是丑数,但14不是,因为它包含因 ...

  2. 京东android面试题(2018 顶级互联网公司面试题系列)

    以下来自于北京的一个兄弟的面试题 1.静态内部类和非静态内部类有什么区别  2.谈谈你对java多态的理解  3.如何开启线程,run和runnable有什么区别  4.线程池的好处  5.说一下你知 ...

  3. Every norm is a convex function

    https://ipfs.io/ipfs/QmXoypizjW3WknFiJnKLwHCnL72vedxjQkDDP1mXWo6uco/wiki/Convex_function.html Every  ...

  4. Python菜鸟之路:Python基础(三)

    一.编码 推荐阅读<字符编码的前世今生>:http://tgideas.qq.com/webplat/info/news_version3/804/808/811/m579/201307/ ...

  5. CSS 布局实例系列(四)如何实现容器中每一行的子容器数量随着浏览器宽度的变化而变化?

    Hello,小朋友们,还记得我是谁吗?对了,我就是~超威~好啦,言归正传,今天的布局实例是: 实现一个浮动布局,红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化,就如下图: 肯定有人心里犯嘀咕 ...

  6. CXF生成client注意事项

    1. 在使用wsdl2java命令生成client文件时在Service的Java文件中面出现super构造错误,这是因为jax-ws2.2规约与java6冲突  故须要减少jax-ws规约版本号. ...

  7. nginx-gridfs的安装

    mongodb中gridfs适合存放视频和高清图片等等超大文件(小的文件建议不要存在mongodb中): 下面是在centos下配置nginx来訪问mongodb中的mp4文件: 1:安装nginx- ...

  8. python 发送邮件的两种方式【终极篇】

    一,利用python自带的库 smtplib简单高效 from email.mime.multipart import MIMEMultipart from email.mime.text impor ...

  9. POJ - 3414 Pots 【BFS】

    题目链接 http://poj.org/problem?id=3414 题意 给出两个杯子 容量分别为 A B 然后给出C 是目标容量 有三种操作 1 将一个杯子装满 2.将一个杯子全都倒掉 3.将一 ...

  10. 尽量不要在viewWillDisappear:方法中移除通知

    1.iOS7新增加了导航控制器侧滑手势,当触发侧滑返回时,会调用系统的viewWillDisappear:方法,取消侧滑返回时又会调用viewWillAppear:方法.   2.在做手势和通知等一系 ...