資訊專欄INFORMATION COLUMN
摘要：在做時，不可避免地要上傳一些文件，最常用到的就是圖片。提供電子郵件服務的站點，除了圖片還需要上傳文檔等其他類型文件的功能。當點擊所看到的按鈕時，實際點擊的是原生上傳控件，這樣一來就觸發了瀏覽器默認行為，即打開選擇文件對話框。
在做 Web App 時，不可避免地要上傳一些文件，最常用到的就是圖片。在線相冊及圖片收藏網站等以提供圖片存儲服務的站點自不用說，社交網絡的頭像、發布信息等都需要上傳圖片的功能。提供電子郵件服務的站點，除了圖片還需要上傳文檔等其他類型文件的功能。
如果是幾年前，這種功能用最原始的 （下文用「表單」指代）就能輕松地實現，只需在提交時加個遮罩層防止用戶瞎點就可以了。然而，隨著 web 的發展與人們審美的提高，這種簡單粗暴的方式越來越不受人待見——就像在大家都懂得打扮自己時你卻還灰頭土臉穿得跟工地里的農民工一樣——太不優雅！
表單的「挫」點主要體現在以下幾個方面：
土掉渣
雖然 （下文用「原生上傳控件」指代）在各個瀏覽器中的外觀不甚相同，但有共同的特點——丑，并固執著！說它「固執」是因為無法通過 CSS 對其進行外觀上的改造。
互動性差
如果是理想情況下，文件會很快傳完，用戶的心情會很愉快；但當遇到文件體積過大或者網速過慢的情況，在等了幾分鐘、十幾分鐘甚至是幾十分鐘后文件還沒傳完，并且不知道已經上傳完多少以及大約還需多久能傳完時，估計用戶就該抓狂想要砸電腦了吧！
不能進行其他操作
表單在提交后，雖然瀏覽器顯示的是當前頁面，但地址欄中的 URL 已經改變，因為是在等待文件完全上傳到服務器，所以頁面暫時沒有刷新。這時用戶的操作行為就受到了限制，只能默默地等待文件上傳結束……
一個人長得丑，那沒有辦法，這是天生的，但不代表沒有魅力——可以靠著裝打扮、學識經歷、金錢地位等彌補天生的缺陷。「上傳文件」也可以像「矮窮挫」一樣逆襲成為「高富帥」！至于如何逆襲，我相信每個人都有自己的見解，這里就說說我所想、我所了解的。
換個造型即使原生上傳控件本身無法通過 CSS 對其進行改造，可還是有辦法讓它看起來很「帥」的——用口紅、胭脂等化妝品將其丑陋的外表遮掩起來。
html
當寫了一個非常好看的替代原生上傳控件的按鈕，用以上方式通過 Chrome 或 Firefox 彈出系統對話框選擇文件并成功上傳到服務器后，想必會雀躍不已地夸自己一句——「我真特么是個天才！」
每實現一個新功能后必定要測試一下 IE 的兼容性。打開 IE9，重復一遍操作步驟，本來以為會正常彈出對話框的，它卻——
javascriptSCRIPT5: 拒絕訪問。
「尼瑪！！！有沒有搞錯？！IE9 居然會有問題？！話說，這個異常是什么意思啊？！問題出在哪里都沒有提示！！！」——看到控制臺中輸出那行紅色的字符串之后，估計你的內心當中有如千萬匹草泥馬在奔騰！
你肯定以為 IE9 會比 IE8 高級些，可事實往往是殘酷的！在表單處理上，它倆都不允許利用 JavaScript 觸發原生上傳控件的 click 事件。
那怎樣才能既隱藏掉原生上傳控件，又彈出選擇文件的系統對話框呢？
html
雖然說是「隱藏」，但只是讓原生上傳控件「不可見」而已，它還是妥妥地在表單中占據著空間位置。當點擊所看到的「按鈕」時，實際點擊的是原生上傳控件，這樣一來就觸發了瀏覽器默認行為，即打開選擇文件對話框。
XHR 上傳 跨域文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/91513.html
摘要：同行這么做使用實現圓形進度條前端掘金在開發微信小程序的時候，遇到圓形進度條的需求。實現也談數組去重前端掘金的數組去重是一個老生常談的話題了。百度前端技術學院自定義前端掘金一標簽概念元素表示用戶界面中項目的標題。 閑話圖片上傳 - 掘金作者：孫輝，美團金融前端團隊成員。15年畢業加入美團，相信技術，更相信技術只是大千世界里知識的一種，個人博客: https://sunyuhui.com ...
摘要：同行這么做使用實現圓形進度條前端掘金在開發微信小程序的時候，遇到圓形進度條的需求。實現也談數組去重前端掘金的數組去重是一個老生常談的話題了。百度前端技術學院自定義前端掘金一標簽概念元素表示用戶界面中項目的標題。 閑話圖片上傳 - 掘金作者：孫輝，美團金融前端團隊成員。15年畢業加入美團，相信技術，更相信技術只是大千世界里知識的一種，個人博客: https://sunyuhui.com ...
摘要：剛做完的一個項目里，為了切圖方便，接觸了下的腳本功能。這里解釋一下，也就是本文所討論的腳本，并不只有可以用，都是可以用的，不過需要調用各自不同的。一些腳本的線上參考資料常用部分漢化版常數表初識腳本留坑待續 剛做完的一個H5項目里，為了切圖方便，接觸了下Photoshop的腳本功能。從找資料、寫腳本到實際能用全套跑了一圈下來發現，嗯，果然是挺難用的[捂臉]。不過雖然缺點滿滿，但PS這個平...
閱讀 1644·2021-11-02 14:42
閱讀 536·2021-10-18 13:24
閱讀 977·2021-10-12 10:12
閱讀 1834·2021-09-02 15:41
閱讀 3218·2019-08-30 15:56
閱讀 2886·2019-08-29 16:09
閱讀 2069·2019-08-29 11:13
閱讀 3635·2019-08-28 18:06
