一個自定義文件上傳控件樣式的技巧

近，在做后臺管理系統時候，多次碰到文件上傳功能，以前可能也是這么做的，但絕對是第一次將處理文件上傳控件樣式的技巧方式寫下來。

文件上傳控件樣式處理的技巧

這應該是一個比較古老的話題了，每個瀏覽器下面的文件上傳控件都表現的不一樣，而且不能定義它的樣式。我們為了讓它在瀏覽器中更好看一點，可謂是絞盡腦汁。

一、偽裝法：

偽裝法可能是我們用的最多的一種處理方式，下面通過一個例子來看一下它的工作原理：

dom結構：

將input=file元素放在一個父元素里，將input=file 的透明度設置為0，（注意：透明度為0的元素是可以綁定點擊事件的，這里不清楚的可以參考我之前寫的這篇文章CSS隱藏的秘密），這樣就將這個父元素偽裝成了文件上傳控件：通過設置這個父元素的位置來決定input的定位，設置這個父元素的寬高來縮放input的點擊范圍。（有些瀏覽器不支持文件上傳控件改變寬高），改變這個父元素的樣式來呈現不同的按鈕“長相”。

樣式大概是這樣的：

上面我們一直提到，input=file元素在某些瀏覽器下是無法改變大小的，當把按鈕設計的比較大而長的時候，點擊偽裝按鈕可能點擊不到透明的文件上傳控件，這也是偽裝法的一個弊端。

然而，下面這個方法（l-f-i-i法）才是我們一直使用的一個比較有效的解決方案。

二、l-f-i-i法：

l-f-i-i（label-for-input-id的縮寫）的原理就是利用label標簽的for屬性和input的id屬性的關聯作用來實現的。來看一下例子的代碼結構：

DOM結構是這樣的：

父元素由上面那個例子的a標簽改成label標簽。這樣好和子元素input建立關聯。

CSS樣式是這樣的：

從樣式文件我們看到，input的寬高大小設置了100%。這里不是所有瀏覽器都會起作用。

效果圖是這樣的：

最后，點擊label（上圖那個背景為#ddd的區域）區域時會觸發文件上傳控件的事件，而現在不管按鈕多大都能觸發（由于label的for與input的id已經關聯了）

寫在最后的總結：

當然，方法也要根據需求的具體情況，兼容范圍而定，我寫的內容基本都是自己使用過的，如有不對的對方，可以留言，謝謝。

短內容，說完整事，哪怕只讀一篇也能學知識。點擊關注小鄭搞碼事，說的都是那堆代碼。謝謝您的鼓勵！

AVA+WORD圖片上傳控件，ASP.NET – 支持WORD上傳的富文本編輯器，HTML5 – 支持WORD上傳的富文本編輯器，ASP.NET支持word上傳的富文本編輯器，PHP支持Word上傳的富文本編輯器，百度ueditor編輯器如何導入word文檔，如何實現導入WORD文檔到UEDITOR編輯器中，導入word文檔到百度編輯器中，將word文檔導入到ueditor編輯器中

前端不固定某一種語言和框架，要求全部都能夠支持，比如HTML5，HTML，VUE，React等。

后端的話最好能夠支持任意語言，實際上哪一種開發語言開發的后端都無所謂，因為提供給前端的只是一個接口，前端并不關心后端的具體實現。

導入后圖片自動上傳到服務器中，圖片和文字HTML自動添加到編輯器中，保留word文檔的格式，字體大小，字體顏色等信息

能夠支持多個系統平臺，比如Windows，macOS，Linux，信創國產化系統，中標麒麟，銀河麒麟，統信UOS，中科方德，龍芯，華為鯤鵬等。

客戶端不用安裝控件。這塊網上資料有一些，找到的論壇里面也有部分交流。

主要的方案就是提供一個轉換接口，轉換接口使用RESTful協議，這樣的話兼容性更好一點，其它的平臺用起來的話更方便簡單一點，而且測試起來也方便。

實際上這個與后端是無關的

現有項目需要為TinyMCE增加導入word文件的功能，導入后word文件里面的圖片自動上傳到服務器中，word里面的文本樣式保留

用戶一般在發新聞和發文章時用到，算是一個高頻使用功能，用戶體驗上來講確實是很好，和以前的發新聞或者發文章的體驗比起來要方便許多，也確實能夠給用戶帶來許多的便利。

大領導要求提供產品完整源代碼，領導要求能夠自主可控，公司有自己的產品，領導要求能夠集成在自己的產品中給客戶使用。示例下載

https://gitee.com/xproer/zyoffice-ueditor1.5x

主要步驟如下：

1.上傳zyoffice文件夾

2.在工具欄中增加插件按鈕

3.在頁面中引入組件文件，初始化組件

效果

開發文檔：https://drive.weixin.qq.com/s?k=ACoAYgezAAwsDazDKJ

產品比較：https://drive.weixin.qq.com/s?k=ACoAYgezAAwh8oq8Zf

產品源代碼：https://drive.weixin.qq.com/s?k=ACoAYgezAAwjJM8412

報價單：https://drive.weixin.qq.com/s?k=ACoAYgezAAwsfyDdrf

前主流的幾款文件上傳控件，以及優缺點，百度上傳插件WEB UPLOADER，使用WEBUPLOADER組件實現大文件分片上傳，斷點續傳，百度WEBUPLOADER開源上傳控件，百度WEBUPLOADER上傳文件夾技術，WEBUPLOADER上傳文件夾技術，JS實現文件夾的多線程上傳和下載，JS實現文件夾的加密上傳和下載，JS怎么實現文件夾的上傳和下載，vue實現文件夾的上傳和下載，web實現文件夾的上傳和下載，網頁實現文件夾的上傳和下載，dom實現文件夾的上傳和下載，html5實現文件夾的上傳和下載，JavaScript實現文件夾的上傳和下載，JS如何實現文件夾的上傳和下載，JS實現文件夾的上傳和下載解決方案，百度webuploader實現文件夾的上傳和下載，webuploader實現文件夾的上傳和下載，JS實現文件夾的上傳和下載，WEBUPLOADER上傳大文件的三種解決方案，WEBUPLOADER上傳大文件的解決方案，WEBUPLOADER上傳大文件的方案，百度WEBUPLOADER上傳大文件的三種解決方案，百度WEBUPLOADER上傳大文件的三種代碼，百度WEBUPLOADER上傳大文件的三種源碼，百度WEBUPLOADER上傳大文件的三種源代碼，HTML5上傳大文件的三種源代碼，JavaScript上傳大文件的三種源代碼，WEBUPLOADER如何實現大文件斷點續傳、秒傳，

百度的webuploader實際上就是用的html5的API，也就是chrome的API，你要問我好不好用，我只能說基本的需求能夠湊合著用，至于好不好用就見仁見智了。

現在chrome提供了相關的API，在HTML5中也能夠上傳文件，不過有限制，每個域名限制了5個TCP連接。用起來不是那么的舒服，也不夠靈活，當然也能夠滿足一般的使用場景。不太復雜的也能夠湊合著用。

網上找了一圈，基本上都是一些文章，能用到的產品很少。

有點搞不懂百度這邊，產品上面問題一大堆，也聯系不到他們的開發團隊，感覺他們就沒用心做這個產品。之前一個哥們接的一個項目也是用的他們的產品，但是客戶那邊在用的時候遇到了問題。怎么都聯系不到百度的開發團隊

前端框架的話VUE2,VUE3,VUE-CLI,React,HTML5都可能用到，看項目需求吧。也不一定，反正不管用哪個框架都是用。

下載這塊就不指望了，根本就沒提供這塊的API，也沒有提供代碼。

后端的話ASP.NET,JAVA，政府項目JAVA用的多一些，還有JSP的，有些公司有成熟的產品用的是JSP。

但是如果有上傳文件夾，文件夾中包含很多文件，比如1萬或者10萬，這種場景下用起來就不是那么的舒服了，如果單個文件的大小超過10G，比如20G，這種場景下用起來也不是特別的舒服。

還有批量下載的話HTML5的能力也有限，下是能下，但是每下一個文件就需要用戶手動確認一下，那比如我要下載100個文件，也需要確認100次，用戶不太接受這種方式。

純JS的方案不多，可選方案不多，基本上只能依造HTML5，HTML5一變基本上就嘎了。可擴展性也不用想了。基本上為零。

1.下載示例

https://gitee.com/xproer/up6-vue-cli

將up6組件復制到項目中

示例中已經包含此目錄

1.引入up6組件

2.配置接口地址

接口地址分別對應：文件初始化，文件數據上傳，文件進度，文件上傳完畢，文件刪除，文件夾初始化，文件夾刪除，文件列表

參考：http://www.ncmem.com/doc/view.aspx?id=e1f49f3e1d4742e19135e00bd41fa3de

3.處理事件

啟動測試

啟動成功

效果

數據庫

源碼工程文檔：https://drive.weixin.qq.com/s?k=ACoAYgezAAw1dWofra

源碼報價單：https://drive.weixin.qq.com/s?k=ACoAYgezAAwoiul8gl

OEM版報價單：https://drive.weixin.qq.com/s?k=ACoAYgezAAwuzp4W0a

控件源碼下載：https://drive.weixin.qq.com/s?k=ACoAYgezAAwbdKCskc

在線咨詢

上一篇：初級web前端開發學習推薦書籍
下一篇：Sass 嵌套

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

一個自定義文件上傳控件樣式的技巧

一、偽裝法：

二、l-f-i-i法：

寫在最后的總結：

您的項目需求