小技巧:onchange事件+iframe模擬非同步檔案上傳
版權宣告:本文為博主原創文章,未經博主允許不得轉載。 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();
}
}
未完待續。
相關文章
- Python模擬HTTP Post上傳檔案PythonHTTP
- 小程式使用 Promise.all 完成檔案非同步上傳Promise非同步
- 10個HTML檔案上傳技巧HTML
- 小程式之檔案上傳
- Django檔案上傳 -- 適用於單一小檔案上傳Django
- php檔案上傳之多檔案上傳PHP
- [轉] PERL模擬飛鴿傳書檔案傳輸總結
- 檔案上傳字元截斷與NC提交技巧字元
- 阿里雲 oss 檔案上傳 小坑阿里
- 單個檔案上傳和批量檔案上傳
- http不使用Form表單傳送檔案資料和非檔案資料(上傳篇)HTTPORM
- 檔案上傳
- 【方法】Html5實現檔案非同步上傳HTML非同步
- Mac小技巧|Mac上如何搜尋隱藏檔案?Mac
- SpringMVC 單檔案上傳與多檔案上傳SpringMVC
- H5拖放非同步檔案上傳之二——上傳進度監聽H5非同步
- <input type="file">連續選中同一檔案無法觸發onchange事件事件
- Java大檔案上傳、分片上傳、多檔案上傳、斷點續傳、上傳檔案minio、分片上傳minio等解決方案Java斷點
- 檔案上傳之三基於flash的檔案上傳
- 模擬一個大檔案
- 前端大檔案上傳/分片上傳前端
- ios檔案同步傳輸工具iOS
- Flask——檔案上傳Flask
- PHP上傳檔案PHP
- JavaScript 檔案上傳JavaScript
- Git上傳檔案Git
- YII檔案上傳
- 檔案上傳概述
- beego上傳檔案Go
- 上傳檔案流程
- 上傳EXCLE檔案
- PHP 檔案上傳PHP
- 檔案上傳漏洞
- 模擬tap事件和longTap事件事件
- 支援多檔案上傳,預覽,拖拽,基於bootstrap的上傳外掛fileinput的ajax非同步上傳boot非同步
- ASP.NET 2.0 多檔案上傳小經驗ASP.NET
- MVC檔案上傳 - 使用Request.Files上傳多個檔案MVC
- .NET Core 如何上傳檔案及處理大檔案上傳