月眸


form+iframe实现ajax文件上传

毛毛小妖 2019-05-05 279浏览 0条评论
首页/ 正文
分享到: / / / /

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

1、首先写一个iframe 

并且写好onload事件

<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、编写uploadFile方法

function uploadFile(){
    $('#upload).submit();
}

4、编写ifameLoad方法

function iframeLoad(ifame){
    var doc = iframe.contentWindow.document; 
    var html = doc.body.innerHTML;
   //处理逻辑
}

 

最后修改:2019-05-05 16:33:54 © 著作权归作者所有
如果觉得我的文章对你有用,请随意赞赏
扫一扫支付

上一篇

发表评论

评论列表

还没有人评论哦~赶快抢占沙发吧~