小技巧:onchange事件+iframe 模拟异步文件上传

简介: 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/chengyi_L/article/details/51271918 1.上传文件一般通过这样来实现,但是file的按钮不是很美观。
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/chengyi_L/article/details/51271918

1.上传文件一般通过<input type="file">这样来实现,但是file的按钮不是很美观。在日常应用中可以通过用一个a标签或者button触发file的click事件来弹出文件窗口。还能通过onchange事件与iframe结合来控制异步。

例:

html代码

<pre name="code" class="html">
<a href="javascript:void(0)" onclick="javascript:upImage()" >选择图片</a>
<form id="imgUpload" name="imgUpload" action="/site" method="post" enctype="multipart/form-data" target="frameFile">
	<input id="filedata" contenteditable="false" type="file" style="display:none;" 
	onChange="document.getElementById('imgUpload').setAttribute('action','/site?' + new Date().getTime() );
<span style="white-space:pre">	</span>document.imgUpload.submit();" name="imgFile">
</form>
<iframe id="frameFile" name="frameFile" style="display: none;"></iframe>


绑定a标签与file的click事件
 
 
function upImage(){
	var isIE=document.all && window.external;
	if(!isIE){
		document.getElementById('filedata').click();
	}
}


未完待续。



目录
相关文章
|
JavaScript 前端开发 搜索推荐
vue -- 单页面应用和多页面应用区别及优缺点
vue -- 单页面应用和多页面应用区别及优缺点
405 0
|
缓存 负载均衡 监控
dubbo3如何优化
dubbo3如何优化
531 1
|
算法 大数据
产品分析——抖音
产品分析——抖音
554 0
|
弹性计算 运维 安全
阿里云发布BYOIP自带IP上云解决方案,助力企业平滑上云
阿里云BYOIP上云方案通过IP地址代播方式,实现企业继续持有原有IP地址范围,将自有IPv4 地址迁移至阿里云上,并将其与云产品ECS、NAT 网关和SLB及ENI绑定使用,对外提供Internet访问能力。
2480 0
阿里云发布BYOIP自带IP上云解决方案,助力企业平滑上云
|
1天前
|
云安全 人工智能 自然语言处理
|
5天前
|
搜索推荐 编译器 Linux
一个可用于企业开发及通用跨平台的Makefile文件
一款适用于企业级开发的通用跨平台Makefile,支持C/C++混合编译、多目标输出(可执行文件、静态/动态库)、Release/Debug版本管理。配置简洁,仅需修改带`MF_CONFIGURE_`前缀的变量,支持脚本化配置与子Makefile管理,具备完善日志、错误提示和跨平台兼容性,附详细文档与示例,便于学习与集成。
314 116
|
8天前
|
数据采集 人工智能 自然语言处理
Meta SAM3开源:让图像分割,听懂你的话
Meta发布并开源SAM 3,首个支持文本或视觉提示的统一图像视频分割模型,可精准分割“红色条纹伞”等开放词汇概念,覆盖400万独特概念,性能达人类水平75%–80%,推动视觉分割新突破。
598 53
Meta SAM3开源:让图像分割,听懂你的话