整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
近，在做后臺(tái)管理系統(tǒng)時(shí)候，多次碰到文件上傳功能，以前可能也是這么做的，但絕對(duì)是第一次將處理文件上傳控件樣式的技巧方式寫下來。
文件上傳控件樣式處理的技巧
這應(yīng)該是一個(gè)比較古老的話題了，每個(gè)瀏覽器下面的文件上傳控件都表現(xiàn)的不一樣，而且不能定義它的樣式。我們?yōu)榱俗屗跒g覽器中更好看一點(diǎn)，可謂是絞盡腦汁。
偽裝法可能是我們用的最多的一種處理方式， 下面通過一個(gè)例子來看一下它的工作原理：
dom結(jié)構(gòu)：
將input=file元素放在一個(gè)父元素里，將input=file 的透明度設(shè)置為0，（注意：透明度為0的元素是可以綁定點(diǎn)擊事件的，這里不清楚的可以參考我之前寫的這篇文章CSS隱藏的秘密），這樣就將這個(gè)父元素偽裝成了文件上傳控件：通過設(shè)置這個(gè)父元素的位置來決定input的定位，設(shè)置這個(gè)父元素的寬高來縮放input的點(diǎn)擊范圍。（有些瀏覽器不支持文件上傳控件改變寬高），改變這個(gè)父元素的樣式來呈現(xiàn)不同的按鈕“長(zhǎng)相”。
樣式大概是這樣的：
上面我們一直提到，input=file元素在某些瀏覽器下是無法改變大小的，當(dāng)把按鈕設(shè)計(jì)的比較大而長(zhǎng)的時(shí)候，點(diǎn)擊偽裝按鈕可能點(diǎn)擊不到透明的文件上傳控件，這也是偽裝法的一個(gè)弊端。
然而，下面這個(gè)方法（l-f-i-i法）才是我們一直使用的一個(gè)比較有效的解決方案。
l-f-i-i（label-for-input-id的縮寫）的原理就是利用label標(biāo)簽的for屬性和input的id屬性的關(guān)聯(lián)作用來實(shí)現(xiàn)的。來看一下例子的代碼結(jié)構(gòu)：
DOM結(jié)構(gòu)是這樣的：
父元素由上面那個(gè)例子的a標(biāo)簽改成label標(biāo)簽。這樣好和子元素input建立關(guān)聯(lián)。
CSS樣式是這樣的：
從樣式文件我們看到，input的寬高大小設(shè)置了100%。這里不是所有瀏覽器都會(huì)起作用。
效果圖是這樣的：
最后，點(diǎn)擊label（上圖那個(gè)背景為#ddd的區(qū)域）區(qū)域時(shí)會(huì)觸發(fā)文件上傳控件的事件，而現(xiàn)在不管按鈕多大都能觸發(fā)（由于label的for與input的id已經(jīng)關(guān)聯(lián)了）
當(dāng)然，方法也要根據(jù)需求的具體情況，兼容范圍而定，我寫的內(nèi)容基本都是自己使用過的，如有不對(duì)的對(duì)方，可以留言，謝謝。
短內(nèi)容，說完整事，哪怕只讀一篇也能學(xué)知識(shí)。點(diǎn)擊關(guān)注小鄭搞碼事，說的都是那堆代碼。謝謝您的鼓勵(lì)！
AVA+WORD圖片上傳控件，ASP.NET – 支持WORD上傳的富文本編輯器，HTML5 – 支持WORD上傳的富文本編輯器，ASP.NET支持word上傳的富文本編輯器，PHP支持Word上傳的富文本編輯器，百度ueditor編輯器如何導(dǎo)入word文檔，如何實(shí)現(xiàn)導(dǎo)入WORD文檔到UEDITOR編輯器中，導(dǎo)入word文檔到百度編輯器中，將word文檔導(dǎo)入到ueditor編輯器中
前端不固定某一種語言和框架，要求全部都能夠支持，比如HTML5，HTML，VUE，React等。
后端的話最好能夠支持任意語言，實(shí)際上哪一種開發(fā)語言開發(fā)的后端都無所謂，因?yàn)樘峁┙o前端的只是一個(gè)接口，前端并不關(guān)心后端的具體實(shí)現(xiàn)。
導(dǎo)入后圖片自動(dòng)上傳到服務(wù)器中，圖片和文字HTML自動(dòng)添加到編輯器中，保留word文檔的格式，字體大小，字體顏色等信息
能夠支持多個(gè)系統(tǒng)平臺(tái)，比如Windows，macOS，Linux，信創(chuàng)國產(chǎn)化系統(tǒng)，中標(biāo)麒麟，銀河麒麟，統(tǒng)信UOS，中科方德，龍芯，華為鯤鵬等。
客戶端不用安裝控件。這塊網(wǎng)上資料有一些，找到的論壇里面也有部分交流。
主要的方案就是提供一個(gè)轉(zhuǎn)換接口，轉(zhuǎn)換接口使用RESTful協(xié)議，這樣的話兼容性更好一點(diǎn)，其它的平臺(tái)用起來的話更方便簡(jiǎn)單一點(diǎn)，而且測(cè)試起來也方便。
實(shí)際上這個(gè)與后端是無關(guān)的
現(xiàn)有項(xiàng)目需要為TinyMCE增加導(dǎo)入word文件的功能，導(dǎo)入后word文件里面的圖片自動(dòng)上傳到服務(wù)器中，word里面的文本樣式保留
用戶一般在發(fā)新聞和發(fā)文章時(shí)用到，算是一個(gè)高頻使用功能，用戶體驗(yàn)上來講確實(shí)是很好，和以前的發(fā)新聞或者發(fā)文章的體驗(yàn)比起來要方便許多，也確實(shí)能夠給用戶帶來許多的便利 。
大領(lǐng)導(dǎo)要求提供產(chǎn)品完整源代碼，領(lǐng)導(dǎo)要求能夠自主可控，公司有自己的產(chǎn)品，領(lǐng)導(dǎo)要求能夠集成在自己的產(chǎn)品中給客戶使用。示例下載
https://gitee.com/xproer/zyoffice-ueditor1.5x
主要步驟如下：
1.上傳zyoffice文件夾
2.在工具欄中增加插件按鈕
3.在頁面中引入組件文件，初始化組件
效果
開發(fā)文檔：https://drive.weixin.qq.com/s?k=ACoAYgezAAwsDazDKJ
產(chǎn)品比較：https://drive.weixin.qq.com/s?k=ACoAYgezAAwh8oq8Zf
產(chǎn)品源代碼：https://drive.weixin.qq.com/s?k=ACoAYgezAAwjJM8412
報(bào)價(jià)單：https://drive.weixin.qq.com/s?k=ACoAYgezAAwsfyDdrf
前主流的幾款文件上傳控件，以及優(yōu)缺點(diǎn)，百度上傳插件WEB UPLOADER，使用WEBUPLOADER組件實(shí)現(xiàn)大文件分片上傳，斷點(diǎn)續(xù)傳，百度WEBUPLOADER開源上傳控件，百度WEBUPLOADER上傳文件夾技術(shù)，WEBUPLOADER上傳文件夾技術(shù)，JS實(shí)現(xiàn)文件夾的多線程上傳和下載，JS實(shí)現(xiàn)文件夾的加密上傳和下載，JS怎么實(shí)現(xiàn)文件夾的上傳和下載，vue實(shí)現(xiàn)文件夾的上傳和下載，web實(shí)現(xiàn)文件夾的上傳和下載，網(wǎng)頁實(shí)現(xiàn)文件夾的上傳和下載，dom實(shí)現(xiàn)文件夾的上傳和下載，html5實(shí)現(xiàn)文件夾的上傳和下載，JavaScript實(shí)現(xiàn)文件夾的上傳和下載，JS如何實(shí)現(xiàn)文件夾的上傳和下載，JS實(shí)現(xiàn)文件夾的上傳和下載解決方案，百度webuploader實(shí)現(xiàn)文件夾的上傳和下載，webuploader實(shí)現(xiàn)文件夾的上傳和下載，JS實(shí)現(xiàn)文件夾的上傳和下載，WEBUPLOADER上傳大文件的三種解決方案，WEBUPLOADER上傳大文件的解決方案，WEBUPLOADER上傳大文件的方案，百度WEBUPLOADER上傳大文件的三種解決方案，百度WEBUPLOADER上傳大文件的三種代碼，百度WEBUPLOADER上傳大文件的三種源碼，百度WEBUPLOADER上傳大文件的三種源代碼，HTML5上傳大文件的三種源代碼，JavaScript上傳大文件的三種源代碼，WEBUPLOADER如何實(shí)現(xiàn)大文件斷點(diǎn)續(xù)傳、秒傳，
百度的webuploader實(shí)際上就是用的html5的API，也就是chrome的API，你要問我好不好用，我只能說基本的需求能夠湊合著用，至于好不好用就見仁見智了。
現(xiàn)在chrome提供了相關(guān)的API，在HTML5中也能夠上傳文件，不過有限制，每個(gè)域名限制了5個(gè)TCP連接。用起來不是那么的舒服，也不夠靈活，當(dāng)然也能夠滿足一般的使用場(chǎng)景。不太復(fù)雜的也能夠湊合著用。
網(wǎng)上找了一圈，基本上都是一些文章，能用到的產(chǎn)品很少。
有點(diǎn)搞不懂百度這邊，產(chǎn)品上面問題一大堆，也聯(lián)系不到他們的開發(fā)團(tuán)隊(duì)，感覺他們就沒用心做這個(gè)產(chǎn)品。之前一個(gè)哥們接的一個(gè)項(xiàng)目也是用的他們的產(chǎn)品，但是客戶那邊在用的時(shí)候遇到了問題。怎么都聯(lián)系不到百度的開發(fā)團(tuán)隊(duì)
前端框架的話VUE2,VUE3,VUE-CLI,React,HTML5都可能用到，看項(xiàng)目需求吧。也不一定，反正不管用哪個(gè)框架都是用。
下載這塊就不指望了，根本就沒提供這塊的API，也沒有提供代碼。
后端的話ASP.NET,JAVA，政府項(xiàng)目JAVA用的多一些，還有JSP的，有些公司有成熟的產(chǎn)品用的是JSP。
但是如果有上傳文件夾，文件夾中包含很多文件，比如1萬或者10萬，這種場(chǎng)景下用起來就不是那么的舒服了，如果單個(gè)文件的大小超過10G，比如20G，這種場(chǎng)景下用起來也不是特別的舒服。
還有批量下載的話HTML5的能力也有限，下是能下，但是每下一個(gè)文件就需要用戶手動(dòng)確認(rèn)一下，那比如我要下載100個(gè)文件，也需要確認(rèn)100次，用戶不太接受這種方式。
純JS的方案不多，可選方案不多，基本上只能依造HTML5，HTML5一變基本上就嘎了。可擴(kuò)展性也不用想了。基本上為零。
1.下載示例
https://gitee.com/xproer/up6-vue-cli
將up6組件復(fù)制到項(xiàng)目中
示例中已經(jīng)包含此目錄
1.引入up6組件
2.配置接口地址
接口地址分別對(duì)應(yīng)：文件初始化，文件數(shù)據(jù)上傳，文件進(jìn)度，文件上傳完畢，文件刪除，文件夾初始化，文件夾刪除，文件列表
參考：http://www.ncmem.com/doc/view.aspx?id=e1f49f3e1d4742e19135e00bd41fa3de
3.處理事件
啟動(dòng)測(cè)試
啟動(dòng)成功
效果
數(shù)據(jù)庫
源碼工程文檔：https://drive.weixin.qq.com/s?k=ACoAYgezAAw1dWofra
源碼報(bào)價(jià)單：https://drive.weixin.qq.com/s?k=ACoAYgezAAwoiul8gl
OEM版報(bào)價(jià)單：https://drive.weixin.qq.com/s?k=ACoAYgezAAwuzp4W0a
控件源碼下載：https://drive.weixin.qq.com/s?k=ACoAYgezAAwbdKCskc
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
