通过<iframe>,实现图片(文件)的上传以及文件(附件)的下载

本文介绍了iframe的基本概念及其在图片上传和附件下载中的应用。通过隐藏iframe,可以实现点击事件触发文件下载,而不会刷新页面。同时,iframe也被用于无刷新的图片上传或表单提交。然而,iframe存在阻塞页面onload、不利于SEO及性能影响等缺点。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.什么是iframe?

iframe闭合标签,会创建包含另个文档的内联框架,针对不支持iframe的浏览器,可以将提示文字放在iframe之间。

2.iframe的作用

(1)通过iframe实现文件(附件)的下载

  <a href="#" onclick="download()">download</a>
  <iframe id="ifile" style="display:none"></iframe>

  function download(){
    var dom=document.getElementById('ifile');
    dom.src="http:xxxx.com";
 }

通过隐藏iframe,当点击事件触发的时候,动态设置src就能实现文件下载功能。

(2)通过iframe实现图片上传或者说表单的提交

<iframe id="upload_target" name="upload_target" src="upload.php" style="width:0;heigth:0;overflow:hidden;border:0;position: absolute; left:-500px;"></iframe>


<form enctype="multipart/form-data" action="upload.php" method="post" target="upload_target">  
     <input type="file" name="userfile" class="file" value="" />  
     <input type="submit" name="uploadimg" value="上传" onClick="upload()"/>  
</form> 

这样,点击事件会触发upload(),并且触发表单提交,并且提交的同时不会刷新页面。

3.iframe有什么缺点

(1)iframe会阻塞主页的onload事件

(2)搜索页面无法解读这种页面(不利于SEO)

(3)iframe和主页面会共享连接池,而浏览器对于相同区域有限制,所以会影响性能。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值