如何主動喚起文件選擇框

yuanzhanghu 發布于2019-08-02 10:03 / 2887人閱讀

摘要：到目前為止，所謂強壯的的眾多上傳控件，仍然在使用慣用伎倆，這種不優雅的方式，早該被淘汰了，該是重構的時候了。

如題，搞過文件上傳的，肯定會有這種想法，也是初學者經常犯的“誤區”

let input = document.createElement("input");
input.type = "file";
input.click();

像我這樣經驗老道的，一看，“不可能，這會受到瀏覽器安全策略限制”，牛逼哄哄的祭出正解

讓 input[type=file] 飄在點擊區上方，老手的慣用伎倆，這就叫“經驗”，但最近一些事，讓我啪啪打臉，顛覆了我的認知，不信你試試在 Chrome 的 Console 中試一下上面的三行代碼。

。。。。。。

是不是很意外，讓你在 Chrome 中試，是因為目前好像只有 Chrome 能這么大膽的放開，讓你這么放肆，我們再嘗試在 Safari 下試一下

。。。。。。

好像沒效果，我們可聯想到，瀏覽器限制這些東西，無非是想確定是人為操作，而非自動運行，在很多類似的情形，都有類似要求“人機交互事件發生時”，比如用戶點擊、鍵盤敲擊。我們可以這么嘗試一下

這種情況很適合那種，“原生的input的太丑，我想弄個漂亮的按鈕觸發上傳”、“我想更優雅的控制上傳”

還有一種情況我想在輸入域中輸入某個命令，回車觸發上傳


敲擊回車觸發上傳

瀏覽器兼容性如下

Ability	IE	Firefox(41)	Safari(11)	Chrome(65)
直接喚起	no	no	no	yes
事件沙盒（click/keyup）喚起	8,9,10,11	yes	yes	yes

可以說是全兼容。

有些版本我懶得測了，但我想連IE8都行，其它的不用測了吧  
IE 下，input[type=file] 需要存在文檔流中

至此，我想你之前經歷過的，input 飄在某個按鈕上方這種別扭設計可以扔掉了。

但是還沒完，不知道大家有沒有想到 labelFor 的應用場景，如果只是想點擊事件轉移，我們可以嘗試以下方案



  點擊上傳

或者


  點擊上傳

這種方式，屬于html原生支持的、設計如此的，不需要一句js腳本，適用于簡單樸素的原生表單。

到目前為止，所謂"強壯的"的眾多上傳控件，仍然在使用慣用伎倆，這種不優雅的方式，早該被淘汰了，該是重構的時候了。

云服務器 GPU云服務器文件選擇框 asp asp 選擇文件框 js文件選擇框插件 asp彈出文件選擇框

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52097.html

如何主動喚起文件選擇框

摘要：到目前為止，所謂強壯的的眾多上傳控件，仍然在使用慣用伎倆，這種不優雅的方式，早該被淘汰了，該是重構的時候了。如題，搞過文件上傳的，肯定會有這種想法，也是初學者經常犯的誤區 let input = document.createElement(input); input.type = file; input.click(); 像我這樣經驗老道的，一看，不可能，這會受到瀏覽器安全策略限制...

hosition 2019-08-22 15:52 評論0 收藏0
Intent以及IntentFilter詳解

摘要：，表明執行操作的字符串。，這個屬性可以指示系統如何啟動一個，以及啟動之后如何處理。是一個字符串，例如這里的的構造函數傳入了兩個參數，和組件名，調用了方法后，會在當前的應用中啟動這個服務。 1. 前言 ? ? ? ?在Android中有四大組件，這些組件中有三個組件與Intent相關，可見Intent在Android整個生態中的地位高度。Intent是信息的載體，用它可以去請求組件做相應...

mrcode 2019-08-16 10:49 評論0 收藏0
表單在ios下輸入框必須重壓或長按才能喚起軟鍵盤

摘要：在做表單時，在瀏覽器中測試正常，在移動端測試出現問題。輕擊無法喚起軟鍵盤，無法對輸入框聚焦，必須長按或重壓才可以。經過測試，發現是由于引入移除移動端點擊延遲引起的沖突，由于之后修復了移動點擊延遲。 **在做表單時，在pc瀏覽器中測試正常，在ios移動端測試出現問題。輕擊input無法喚起軟鍵盤，無法對輸入框聚焦，必須長按或重壓才可以。經過測試，發現是由于引入fastclick.js（移...

tainzhi 2019-08-26 10:46 評論0 收藏0