資訊專欄INFORMATION COLUMN
摘要：到目前為止，所謂強(qiáng)壯的的眾多上傳控件，仍然在使用慣用伎倆，這種不優(yōu)雅的方式，早該被淘汰了，該是重構(gòu)的時候了。
如題，搞過文件上傳的，肯定會有這種想法，也是初學(xué)者經(jīng)常犯的“誤區(qū)”
let input = document.createElement("input");
input.type = "file";
input.click();
像我這樣經(jīng)驗老道的，一看，“不可能，這會受到瀏覽器安全策略限制”，牛逼哄哄的祭出正解
讓 input[type=file] 飄在點擊區(qū)上方，老手的慣用伎倆，這就叫“經(jīng)驗”，但最近一些事，讓我啪啪打臉，顛覆了我的認(rèn)知，不信你試試在 Chrome 的 Console 中試一下上面的三行代碼。
。。。。。。
是不是很意外，讓你在 Chrome 中試，是因為目前好像只有 Chrome 能這么大膽的放開，讓你這么放肆，我們再嘗試在 Safari 下試一下
。。。。。。
好像沒效果，我們可聯(lián)想到，瀏覽器限制這些東西，無非是想確定是人為操作，而非自動運行，在很多類似的情形，都有類似要求“人機(jī)交互事件發(fā)生時”，比如用戶點擊、鍵盤敲擊。我們可以這么嘗試一下
這種情況很適合那種，“原生的input的太丑，我想弄個漂亮的按鈕觸發(fā)上傳”、“我想更優(yōu)雅的控制上傳”
還有一種情況我想在輸入域中輸入某個命令，回車觸發(fā)上傳
敲擊回車觸發(fā)上傳
瀏覽器兼容性如下
| 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] 需要存在文檔流中
至此，我想你之前經(jīng)歷過的，input 飄在某個按鈕上方這種別扭設(shè)計可以扔掉了。
但是還沒完，不知道大家有沒有想到 labelFor 的應(yīng)用場景，如果只是想點擊事件轉(zhuǎn)移，我們可以嘗試以下方案
或者
這種方式，屬于html原生支持的、設(shè)計如此的，不需要一句js腳本，適用于簡單樸素的原生表單。
到目前為止，所謂"強(qiáng)壯的"的眾多上傳控件，仍然在使用慣用伎倆，這種不優(yōu)雅的方式，早該被淘汰了，該是重構(gòu)的時候了。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/52097.html
摘要：到目前為止，所謂強(qiáng)壯的的眾多上傳控件，仍然在使用慣用伎倆，這種不優(yōu)雅的方式，早該被淘汰了，該是重構(gòu)的時候了。 如題，搞過文件上傳的，肯定會有這種想法，也是初學(xué)者經(jīng)常犯的誤區(qū) let input = document.createElement(input); input.type = file; input.click(); 像我這樣經(jīng)驗老道的，一看，不可能，這會受到瀏覽器安全策略限制...
摘要：，表明執(zhí)行操作的字符串。，這個屬性可以指示系統(tǒng)如何啟動一個，以及啟動之后如何處理。是一個字符串，例如這里的的構(gòu)造函數(shù)傳入了兩個參數(shù)，和組件名，調(diào)用了方法后，會在當(dāng)前的應(yīng)用中啟動這個服務(wù)。 1. 前言 ? ? ? ?在Android中有四大組件，這些組件中有三個組件與Intent相關(guān)，可見Intent在Android整個生態(tài)中的地位高度。Intent是信息的載體，用它可以去請求組件做相應(yīng)...
摘要：在做表單時，在瀏覽器中測試正常，在移動端測試出現(xiàn)問題。輕擊無法喚起軟鍵盤，無法對輸入框聚焦，必須長按或重壓才可以。經(jīng)過測試，發(fā)現(xiàn)是由于引入移除移動端點擊延遲引起的沖突，由于之后修復(fù)了移動點擊延遲。 **在做表單時，在pc瀏覽器中測試正常，在ios移動端測試出現(xiàn)問題。輕擊input無法喚起軟鍵盤，無法對輸入框聚焦，必須長按或重壓才可以。經(jīng)過測試，發(fā)現(xiàn)是由于引入fastclick.js（移...
閱讀 786·2023-04-25 16:55
閱讀 2824·2021-10-11 10:59
閱讀 2092·2021-09-09 11:38
閱讀 1810·2021-09-03 10:40
閱讀 1500·2019-08-30 15:52
閱讀 1137·2019-08-30 15:52
閱讀 971·2019-08-29 15:33
閱讀 3507·2019-08-29 11:26
