在做文件上传时除了传入文件外,还有附件参数,并且要求不刷新页面,之前是表单提交的方式,现在修改成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. spring boot数据库操作汇总

    1 关于orm orm即object relational mapping,对象关系映射,即将数据库中的表映射成对象. 常用的orm有以下: mybatis spring jdbc template ...

  2. 爬虫-【selenium—Webdriver元素定位的八种常用方式

    在使用selenium webdriver进行元素定位时,通常使用findElement或findElements方法结合By类返回的元素句柄来定位元素.其中By类的常用定位方式共八种,现分别介绍如下 ...

  3. Windows存储管理之磁盘结构详解

    Windows磁盘结构: Windows的主流磁盘结构分为MBR和GPT两种.MBR是早期Windows的唯一选择,但是随着物理磁盘的容量不断增大.GPT结构成为目前的主流,最大支持超过2TB的容量, ...

  4. iOS 屏幕原点坐标 && 导航栏风格的自定义

    其一 屏幕原点坐标 (x ,y) 受 self.navigationController. navigationBar 的 setTranslucent (BOOL) 属性控制 在 iOS7 以后   ...

  5. 培训笔记——Linux基本命令

    在介绍命令之前,更重要的要先介绍一下快速输入命令的方法. 如果你能记住一些常用命令,毫无疑问,通过命令的操作方式比通过鼠标的操作方式要快. 但是有一些命令或是命令用到的参数如文件名特别复杂特别长,这时 ...

  6. 动态创建selectjs 操作select和option

    1.动态创建select function createSelect(){ var mySelect = document.createElement("select"); myS ...

  7. Oracle数据库体系结构(6)数据库归档重做日志文件管理

    归档重做日志文件的概念和选择 Oracle数据库能够把已经写满了的重做日志文件保存到一个或多个指定的离线位置,这种保存的文件为归档重做日志文件.通常情况下一个归档重做日志时一个被LGWR写满的重做日志 ...

  8. P4965 薇尔莉特的打字机

    题目 P4965 薇尔莉特的打字机 快到十二点了正在颓废突然发现了一道好题 虽然毒瘤,但确实是容斥原理的好题啊,做法也特别巧妙(标程 思路 题目大意(怕自己突然忘) n个初始字符,m个操作(加入或删除 ...

  9. vi/vim滚动屏幕

    VIM帮助文档如是说 Q_sc Scrolling CTRL-E N CTRL-E window N lines downwards (default: 1) CTRL-D N CTRL-D wind ...

  10. c++大作业五子棋-需求分析与设计方案

    写在前边: 本来上学期就已经完成这个大作业,临近考试太忙. 而且老师最后要查重,就没有把代码放上来. 如需整个工程,移步http://download.csdn.net/detail/sdzuiaid ...