在項(xiàng)目安開發(fā)中，有一個(gè)需求是用戶需上傳特定的text文件，根據(jù)此文件判斷設(shè)備的狀態(tài)。

以上是需求，此時(shí)需要在頁面上用到文件上傳的功能，原始的文件上傳樣式不好看，自己此段時(shí)間一直都在用layui前端框架寫頁面，本想用layui官網(wǎng)上給的文件上傳功能的，但是經(jīng)理說上傳的文件不能只顯示文件名，

還要配上一張圖片。layui上傳文件的模式都是：

顯然這個(gè)版本的文件上傳還沒有符合項(xiàng)目的需要。

在接下來的對(duì)比中，看到了百度富文本編輯器的文件上傳和圖片上傳樣式：

??

??

??

因?yàn)檫@個(gè)功能是在百度富文本編輯器工具欄中的，想要用這個(gè)功能，第一就是需要中上傳文件是在編輯內(nèi)容的情況下，配置百度富文本自定義上傳。 第二就是看它的源碼，自己分析把這個(gè)功能剝離出來。

無奈里面的配置信息有點(diǎn)多，只好在網(wǎng)上查看相關(guān)的類百度富文本編輯器上傳單獨(dú)使用的功能，看到了一篇文章正是講單獨(dú)使用百度富文本編輯器文件上傳和圖片上傳的。具體是看誰的博客的我也給忘了，反正是按照Ta說的自己動(dòng)手試了試還可以，

在這里先簡單說下實(shí)現(xiàn)過程：

首先下載百度富文本，下載完解壓后放在自己web項(xiàng)目webapps下面。

接下來是寫一個(gè)簡單的demo.jsp頁面：

一定要引入相應(yīng)的ueditor.config.js和ueditor.all.js。

原文上是寫的附件上傳和圖片上傳兩個(gè)的，但是用于需要，我只測(cè)試了附件上傳，所以這里的代碼也都是針對(duì)附件上傳的。

處理相應(yīng)的js配置：

js代碼為：

1

2

3 //實(shí)例化編輯器，這里注意配置項(xiàng)隱藏編輯器并禁用默認(rèn)的基礎(chǔ)功能。

4 var uploadEditor = UE.getEditor("uploadEditor", {5 isShow: false,6 focus: false,7 enableAutoSave: false,8 autoSyncData: false,9 autoFloatEnabled:false,10 wordCount: false,11 sourceEditor: null,12 scaleEnabled:true,13 toolbars: [["attachment"]]14 });15

16 //todo::some code

17

18

19

20 uploadEditor.ready(function () {21 //監(jiān)聽插入附件

22 uploadEditor.addListener("afterUpfile",_afterUpfile);23 });24

25 document.getElementById('j_upload_file_btn').onclick =function () {26 var dialog = uploadEditor.getDialog("attachment");27 dialog.title = '附件上傳';28 dialog.render();29 dialog.open();30 };31

32 function _afterUpfile(t, result) {33 var fileHtml = '';34 for(var i in result){35 fileHtml = '

'+result[i].url+'';36 }37 document.getElementById('upload_file_wrap').innerHTML =fileHtml;38 }39

View Code

除了以上操作，還要在ueditor.all.js里面ctrl + f搜索：me.execCommand('insertHtml', html);

然后在其下面加入一行代碼：me.fireEvent('afterUpfile', filelist);基本上算是完成了。我自己測(cè)過了可以使用的:

不會(huì)上傳動(dòng)態(tài)圖片，只能上傳操作過程：

? ?

??

??

自己可以測(cè)試一下。

當(dāng)然了，Ta這個(gè)寫的都是多文件上傳的，但是我的需要是上傳一個(gè)固定的txt文件，而自己又不想翻來覆去去尋找源碼代碼去改，最后決定自己用layui寫一個(gè)類百度富文本上傳附件功能：

百度富文本是點(diǎn)擊一個(gè)錨點(diǎn)或者按鈕彈出上傳頁面的，這點(diǎn)對(duì)于layui來說不要太輕松。

首先頁面要先引入layui.js和layui.css，

然后定義一個(gè)打開上傳附件的按鈕，點(diǎn)擊此按鈕彈出上傳的框：

1

2

3 上傳校準(zhǔn)文件

4

5

在js里面寫點(diǎn)擊按鈕打開彈窗事件：

$('#file_btn').click(function(){

layer.open({

type:2,

title:'上傳校準(zhǔn)文件',

maxmin:false,

shadeClose:false, //點(diǎn)擊遮罩關(guān)閉層

area : ['650px' , '450px'],

content:'/log/upload'});

});

content里面的地址是經(jīng)過后臺(tái)控制層跳轉(zhuǎn)的頁面，因?yàn)槲矣玫氖荕VC模式,簡單的頁面代碼：

1

2 pageEncoding="utf-8"%>

3

4

5

6

7

8

9

10

11

文件上傳

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

點(diǎn)擊上傳校準(zhǔn)文件按鈕彈出頁面為：

然后在這個(gè)頁面上添加一個(gè)選擇文件的按鈕或者圖片，我用的就是layui官網(wǎng)上給的樣式，看起來還是可以的：

1

2

3

4

5 

6

點(diǎn)擊上傳，或?qū)⑽募献У酱颂?/p>

7

8

9

10

11 確定

12 取消

13

14

頁面顯示為：

根據(jù)百度富文本附件上傳操作流程，我這邊應(yīng)該是點(diǎn)擊或者拖拽完文件后這部分隱藏掉，然后天換成相應(yīng)的文件列表頁面：

1

2

3

4

5

6 重新選擇7

8

9 開始上傳10

11

12

13

14

15

16

17

18

19

20

21

22 

23

點(diǎn)擊上傳，或?qū)⑽募献У酱颂?/p>

24

25

26

27

28 確定

29 取消

30

31

圖片和文件名的樣式為：

1 /*上傳文件*/

2 .imgg{width: 110px;height: 130px;background: url(../images/txt.png) no-repeat center;text-align: center;margin: 9px 0 09px; position: relative;3 display: block;float: left;overflow: hidden;font-size: 12px;}4 .titll{position: absolute;top: 0;left: 0;width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;top: 5px;text-align: center;}

其中的圖片自己去查找選擇。

頁面顯示為：

但是這樣太難看了，再對(duì)比一下百度富文本附件上傳樣式，emm，加個(gè)顯示文件個(gè)數(shù)的，然后加個(gè)分割線：

1

2

3 選中1個(gè)文件，上傳成功0個(gè)

4

5 重新選擇6

7

8 開始上傳9

10

11

---

12

13

14

15

16

17

18

19

20

21

22

再看頁面：

注意：這部分代碼應(yīng)該是隱藏著的，當(dāng)用戶點(diǎn)擊選擇文件后才會(huì)把點(diǎn)擊選擇文件隱藏這個(gè)頁面代碼打開，所以在頭部我設(shè)置了css屬性：display:none;

當(dāng)然，這些操作是用戶選擇文件不上傳，當(dāng)點(diǎn)擊特定的上傳按鈕時(shí)才上傳文件的，所以js代碼為：

1 layui.use(['upload','form','element'], function(){2 var $ =layui.jquery3 ,upload =layui.upload;4 var form =layui.form;5 var element =layui.element;6 upload.render({7 elem: '#test1'

8 ,exts : 'txt|TXT'

9 ,url: '/log/upload'

10 ,accept : 'file'

11 ,multiple: false

12 ,auto: false//不自動(dòng)上傳

13 ,bindAction: '#test2'

14 ,choose: function(obj){15 $('.file_upload').hide();16 $('.ups').show();17 //讀取本地文件

18 obj.preview(function(index, file, result){19 $('.titll').text(file.name);20 });21 }22 ,done: function(res){//上傳完畢后的回調(diào)23 //console.log(res);

24

25 }26 });27 });

choose:就是選擇文件后的回調(diào)函數(shù)，選擇完文件之后先不上傳，把選擇文件這部分隱藏掉：$('.file_upload).hide();然后把選擇完文件之后的頁面顯示出來：$('.ups').show();

然后在obj.preview方法中獲取到文件名賦值到titll類中用于顯示文件名。

然后在done中寫上傳完畢之后的事情：簡單說就是把上傳按鈕給禁用了，防止重復(fù)上傳，然后顯示上傳成功個(gè)數(shù)給改變一下：

1 $('#succ').text(1);2 $('#test2').addClass('layui-btn-disabled');

因?yàn)槲疫@這邊只是上傳一個(gè)文件的，所以添加的1.

然后想刷新父頁面的刷新就行，根據(jù)需要寫。

接下來說下重新上傳事件：

重新上傳就等于剛打開這個(gè)彈出層第一次點(diǎn)擊一樣，所以我是這樣寫的：

1 //重新選擇

2 $('#test3').click(function(){3 $('#test1').trigger("click");4 });

test1就是剛彈出這個(gè)頁面點(diǎn)擊選擇文件的模板選擇器。重傳等于說是這個(gè)按鈕重新點(diǎn)擊了一次，所以給它加個(gè)點(diǎn)擊事件，雖然隱藏了，但是并不影響。

然后再之前操作中上傳成功之后把開始上傳這個(gè)按鈕給禁用了防止重復(fù)上傳。如果點(diǎn)擊重新上傳的話這個(gè)開始上傳按鈕應(yīng)該也是可以點(diǎn)擊的。

本來是想加再點(diǎn)擊重新上傳事件里面，但是考慮到用戶點(diǎn)擊重新上傳但由于一些原因并沒有選擇文件，這樣的話還是會(huì)造成一些不必要的bug。

所以把開始上傳按鈕的禁用狀態(tài)改掉應(yīng)該是寫再用戶選擇完文件之后發(fā)生的：

1 obj.preview(function(index, file, result){2 $('.titll').text(file.name);3 $('#test2').removeClass('layui-btn-disabled');//移除禁用狀態(tài)

4 });

頁面依次為：上傳完畢后頁面；點(diǎn)擊重新上傳按鈕頁面；點(diǎn)擊重新上傳按鈕選擇完文件后頁面：

??

??

至此，大致的基本都算是寫完了，接下來增加個(gè)功能進(jìn)度條！

進(jìn)度條我用的也是layui官網(wǎng)上給的進(jìn)度條demo，樣式還是可以的，近一段時(shí)間對(duì)于layui很癡迷。接下來說下實(shí)現(xiàn)過程：

首先進(jìn)度條顯示是在用戶點(diǎn)擊開始上傳之后才出現(xiàn)的，所以頁面上加上一個(gè)進(jìn)度條(element模板)：

1

2

3

在分割線下面，看頁面上：

當(dāng)然，這里給它設(shè)置為隱藏，在用戶點(diǎn)擊開始上傳時(shí)候再顯示出來，讓它從0%一直到100%顯示上傳成功后再次隱藏掉。設(shè)置為隱藏再style里面加個(gè)屬性：display:none;

前面說了，這個(gè)進(jìn)度條顯示是在用戶點(diǎn)擊開始上傳時(shí)候才有的，直到上傳成功結(jié)束，所以我把這個(gè)事件寫在用戶點(diǎn)擊上傳之后的方法before中：

1 ,before: function(obj){ //obj參數(shù)包含的信息，跟 choose回調(diào)完全一致。

2 $('.layui-progress').show();//進(jìn)度條顯示

3 }

這個(gè)方法寫在choose與done中間。這樣的話當(dāng)用戶點(diǎn)擊開始上傳之后進(jìn)度條就會(huì)顯示出來了。

接下來是實(shí)現(xiàn)進(jìn)度條的loading！

由于時(shí)間原因我直接用的是layui官網(wǎng)上給的demo，自己改改直接拿過來用，就是使用周期性定時(shí)器setInterval：

先貼上代碼：

1 ,before: function(obj){ //obj參數(shù)包含的信息，跟 choose回調(diào)完全一致。

2 $('.layui-progress').show();//進(jìn)度條顯示

3 var n = 0,4 timer =setInterval(function(){5 n = n + Math.random()*1000|0;6 if(n>80){7 n = 80;8 clearInterval(timer);9 }10 element.progress('demo', n+'%');11 }, 2000);12 }

n就是定義的百分百，從0開始的。然后用n = n + Math.random()*1000|0;? 獲取進(jìn)度百分比。一直到n=80也就是進(jìn)度條到80%的時(shí)候清除定時(shí)器，用element.progress('demo', n+'%')給進(jìn)度條賦值。

為什么到80%？因?yàn)檫@短時(shí)間是上傳的時(shí)間，在文件上傳成功之后才返回100%；

在done里面獲取到返回的狀態(tài)，當(dāng)返回成功時(shí)用element.progress('demo', 100+'%');使進(jìn)度條到100%。

頁面演示為：開始上傳；上傳過程；上傳成功；上傳成功后：

?

??

??

上面就是所有的實(shí)現(xiàn)過程了，如果想實(shí)現(xiàn)多文件上傳或者圖片上傳只需要改改其中的一些代碼就可以了。

特此記一下，以后可以直接拿來用。

總結(jié)

以上是生活随笔為你收集整理的百度富文本编辑jsp上传_类百度富文本编辑器文件上传。的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。