在做文件上传时除了传入文件外,还有附件参数,并且要求不刷新页面,之前是表单提交的方式,现在修改成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. Js数组的map,filter,reduce,every,some方法

    var arr=[1,2,3,4,5,6]; res = arr.map(function(x){return x*x}) [1, 4, 9, 16, 25, 36] res = arr.filter ...

  2. 教你使用SQL查询(1-12)

    教你使用 Select 查询语句 (1) SELECT 语句基本语法简介 http://jimshu.blog.51cto.com/3171847/1363101(2) TOP 和 OFFSET 筛选 ...

  3. yii 资料

    https://github.com/forecho/awesome-yii2 会随时更新 链接:http://pan.baidu.com/s/1mgCKtUK 密码:t6t1 与<YII框架& ...

  4. iOS tabbar 上面更换任意图

    tabbar 对add 上面的图片 有一层默认虚化 对于这种系统高度继承后的 控件 处理办法就是自定义 解决方案 1.放在tabbar 上的图片 不能太小 不然裁剪后 会很模糊 2 .通过裁剪 压缩的 ...

  5. 利用CocoaPods管理本地工程和发布开源框架

    发布自己三方框架 发布云端库 1.创建spec pod spec create xxx 2.编辑spec s.name:名称,pod search 搜索的关键词,注意这里一定要和.podspec的名称 ...

  6. 斯坦福机器学习视频笔记 Week2 多元线性回归 Linear Regression with Multiple Variables

    相比于week1中讨论的单变量的线性回归,多元线性回归更具有一般性,应用范围也更大,更贴近实际. Multiple Features 上面就是接上次的例子,将房价预测问题进行扩充,添加多个特征(fea ...

  7. dbgrid,datasoure,ClientDataSet的简单应用

    dbgrid是用来在界面上显示数据的,需要连接源dbgrid1.datasource := datasource1; datasource:作为dbgrid,clientDataset的连接桥梁,需要 ...

  8. codeforces 154A 贪心

    贪心 题目自身限制每个字母最多出现在一个限制词语中,给出k个限制词语,将问题转化为k个子问题,对每个限制词语遍历给出的字符串,如限制词do,若出现连续的oddoood(连续的o和d),统计o和d出现的 ...

  9. 在Delphi中使用ShellExecute(handle, 'open', PChar(fname),nil, nil, SW_HIDE)函数应注意的问题

    在Delphi中使用ShellExecute(handle, 'open', PChar(fname),nil, nil, SW_HIDE)函数应注意的问题: 一.对一般vcl程序及isapi dll ...

  10. XP最高支持IE8

    1.https://www.microsoft.com/zh-CN/download/details.aspx?id=24488 适用于 Windows XP 的 Internet Explorer ...