首页 > 其他分享 >form+iframe 实现ajax文件上传

form+iframe 实现ajax文件上传

时间:2023-05-23 14:23:52浏览次数:34  
标签:文件 form ajax html iframe 上传

在做文件上传时除了传入文件外,还有附件参数,并且要求不刷新页面,之前是表单提交的方式,现在修改成ajax上传的方式,由于没有选择用插件,所以用form+iframe的方式,并且这种方式对IE8以上及主流浏览器都支持。

1、首先写一个iframe

<iframe name="myiframe" style="display:none;" onl oad="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,ajax,html,iframe,上传
From: https://www.cnblogs.com/hello-ruby/p/17425053.html

相关文章

  • c# winform定时刷新
     Thread多线程publicpartialclassForm2:Form{//横向滚动条记录的是像素位数//竖向滚动条记录的行的索引值intVerticalScrollIndex=0;intHorizontalOffset=0;publicForm2(){Initializ......
  • 盘点界面控件DevExpress WinForms的几大应用程序主题
    DevExpressWinForm控件包含了50+个自定义皮肤,其中涵盖了MicrosoftOffice和Windows11启发式的应用程序主题。PS:DevExpressWinForm拥有180+组件和UI库,能为WindowsForms平台创建具有影响力的业务解决方案。DevExpressWinForm能完美构建流畅、美观且易于使用的应用程序,无论是Of......
  • Combining Label Propagation and Simple Models Out-performs Graph Neural Networks
    目录概符号说明C&S代码HuangQ.,HeH.,SinghA.,LimS.andBensonA.R.Combininglabelpropagationandsimplemodelsout-performsgraphneuralnetworks.ICLR,2021.概将预测概率作为信号进行传播.符号说明\(G=(V,E)\),图;\(|V|=n\);\(X\in\mathbb{R}......
  • Winform设置成默认以管理员方式启动的方法
     很多exe应用如果不以管理员权限运行,达不到运行目的,也会让用户很困扰。解决方法:1、在项目上右键添加新文件,选择新建app.manifest文件 2、按照下图参照注释部分修改trustInfo节点中的配置即可还有另外一个方法。这个需要写在Program.cs里面。staticvoidMain(s......
  • AJAX实现计算器
    <!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>calc_AJAX.html</title><scripttype="text/javascript">functionloadXMLDoc(number1,number2){varxmlhttp;......
  • calc_AJAX.html
    <!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>calc_AJAX.html</title><scripttype="text/javascript">functionloadXMLDoc(){varxmlhttp;if(window.XMLH......
  • Java使用HttpClient以multipart/form-data向接口上传文件
    前言对接某公司的接口,涉及到资质上传等业务。需要对接他们的上传附件接口。JDK1.8httpclient4.x封装httpclient方法publicstaticStringpostFileMultiPart(Stringurl,Map<String,ContentBody>reqParam)throwsIOException{ CloseableHttpClienthttpclient=HttpCl......
  • 【研究生学习】Transformer模型以及Pytorch实现
    Transformer是Google在2017年提出的网络架构,仅依赖于注意力机制就可以处理序列数据,从而可以不使用RNN或CNN。当前非常热门的BERT模型就是基于Transformer构建的,本篇博客将介绍Transformer的基本原理,以及其在Pytorch上的实现。......
  • 加餐-基于Transformer实现中译英(tf2.x)
    1.项目概述本实例使用Transformer这个强大的特征提取工具,把英文翻译成中文。具体步骤先构建Transorformer架构,然后训练模型、评估模型,最后使用几个英文语句测试模型效果。为便于训练,这里训练数据仅使用使用TensorFlow2上的wmt19_translate/zh-en数据集中新闻评论部分(newscommen......
  • 14-Filter&Listener&Ajax&Axios&JSON
    1,Filter1.1Filter概述Filter表示过滤器,是JavaWeb三大组件(Servlet、Filter、Listener)之一。Servlet我们之前都已经学习过了,Filter和Listener我们今天都会进行学习。过滤器可以把对资源的请求拦截下来,从而实现一些特殊的功能。如下图所示,浏览器可以访问服务器上的所有......