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