小技巧: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();
	}
}


未完待续。



目录
相关文章
|
8月前
|
JavaScript 前端开发
js基础——事件(鼠标事件、键盘事件、表单事件......)
js基础——事件(鼠标事件、键盘事件、表单事件......)
66 0
|
前端开发
61EasyUI 表单 - 创建异步提交表单
61EasyUI 表单 - 创建异步提交表单
51 0
|
JavaScript
vue组件与iframe通信,防止多次触发messag事件
vue组件与iframe通信,防止多次触发messag事件
374 0
|
JavaScript
HTML DOM 允许我们通过触发事件来执行代码。
HTML DOM 允许我们通过触发事件来执行代码。
56 0
|
Web App开发 JavaScript 前端开发
Javascript判断页面刷新或关闭的方法(转)
onbeforeunload与onunload事件 Onunload,onbeforeunload都是在刷新或关闭时调用,可以在脚本中通过window.onunload来指定或者在里指定。区别在于onbeforeunload在onunload之前执行,它还可以阻止onunload的执行。
2019 0
|
存储
如何实现Window Form上的自定义事件
本文将介绍如何在Window窗体上自定义一个自定义事件(custom event) ,并通过订阅事件来进行事件的通知。
795 0
如何实现Window Form上的自定义事件
|
Web App开发 前端开发 容器
如何解决 iframe 无法触发 clickOutside
在公司的一次小组分享会上,组长给我们分享了一个他在项目中遇到的一个问题。在一个嵌入 iframe 的系统中,当我们点击按钮展开 Dropdown 展开后,再去点击 iframe 发现无法触发 Dropdown 的 clickOutside 事件,导致 Dropdown 无法关闭。
2939 0

热门文章

最新文章