小技巧:onchange事件+iframe模擬非同步檔案上傳

roy711093發表於2016-04-28
版權宣告:本文為博主原創文章,未經博主允許不得轉載。 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();
	}
}

未完待續。


相關文章