百度富文本编辑jsp上传_类百度富文本编辑器文件上传。
在項目安開發(fā)中，有一個需求是用戶需上傳特定的text文件，根據(jù)此文件判斷設(shè)備的狀態(tài)。
以上是需求，此時需要在頁面上用到文件上傳的功能，原始的文件上傳樣式不好看，自己此段時間一直都在用layui前端框架寫頁面，本想用layui官網(wǎng)上給的文件上傳功能的，但是經(jīng)理說上傳的文件不能只顯示文件名，
還要配上一張圖片。layui上傳文件的模式都是：
顯然這個版本的文件上傳還沒有符合項目的需要。
在接下來的對比中，看到了百度富文本編輯器的文件上傳和圖片上傳樣式：
??
??
??
因為這個功能是在百度富文本編輯器工具欄中的，想要用這個功能，第一就是需要中上傳文件是在編輯內(nèi)容的情況下，配置百度富文本自定義上傳。 第二就是看它的源碼，自己分析把這個功能剝離出來。
無奈里面的配置信息有點多，只好在網(wǎng)上查看相關(guān)的類百度富文本編輯器上傳單獨使用的功能，看到了一篇文章正是講單獨使用百度富文本編輯器文件上傳和圖片上傳的。具體是看誰的博客的我也給忘了，反正是按照Ta說的自己動手試了試還可以，
在這里先簡單說下實現(xiàn)過程：
首先下載百度富文本，下載完解壓后放在自己web項目webapps下面。
接下來是寫一個簡單的demo.jsp頁面：
一定要引入相應(yīng)的ueditor.config.js和ueditor.all.js。
原文上是寫的附件上傳和圖片上傳兩個的，但是用于需要，我只測試了附件上傳，所以這里的代碼也都是針對附件上傳的。
處理相應(yīng)的js配置：
js代碼為：
1
2
3 //實例化編輯器，這里注意配置項隱藏編輯器并禁用默認(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 }39View Code
除了以上操作，還要在ueditor.all.js里面ctrl + f搜索：me.execCommand('insertHtml', html);
然后在其下面加入一行代碼：me.fireEvent('afterUpfile', filelist);基本上算是完成了。我自己測過了可以使用的:
不會上傳動態(tài)圖片，只能上傳操作過程：
? ?
??
??
自己可以測試一下。
當(dāng)然了，Ta這個寫的都是多文件上傳的，但是我的需要是上傳一個固定的txt文件，而自己又不想翻來覆去去尋找源碼代碼去改，最后決定自己用layui寫一個類百度富文本上傳附件功能：
百度富文本是點擊一個錨點或者按鈕彈出上傳頁面的，這點對于layui來說不要太輕松。
首先頁面要先引入layui.js和layui.css，
然后定義一個打開上傳附件的按鈕，點擊此按鈕彈出上傳的框：
1
2
3 上傳校準(zhǔn)文件
4
5
在js里面寫點擊按鈕打開彈窗事件：
$('#file_btn').click(function(){
layer.open({
type:2,
title:'上傳校準(zhǔn)文件',
maxmin:false,
shadeClose:false, //點擊遮罩關(guān)閉層
area : ['650px' , '450px'],
content:'/log/upload'});
});
content里面的地址是經(jīng)過后臺控制層跳轉(zhuǎn)的頁面，因為我用的是MVC模式,簡單的頁面代碼：
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
點擊上傳校準(zhǔn)文件按鈕彈出頁面為：
然后在這個頁面上添加一個選擇文件的按鈕或者圖片，我用的就是layui官網(wǎng)上給的樣式，看起來還是可以的：
1
2
3
4
5
6
點擊上傳，或?qū)⑽募献У酱颂?/p>
7
8
9
10
11 確定
12 取消
13
14
頁面顯示為：
根據(jù)百度富文本附件上傳操作流程，我這邊應(yīng)該是點擊或者拖拽完文件后這部分隱藏掉，然后天換成相應(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
點擊上傳，或?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;}
其中的圖片自己去查找選擇。
頁面顯示為：
但是這樣太難看了，再對比一下百度富文本附件上傳樣式，emm，加個顯示文件個數(shù)的，然后加個分割線：
1
2
3 選中1個文件，上傳成功0個
4
5 重新選擇6
7
8 開始上傳9
10
11
12
13
14
15
16
17
18
19
20
21
22
再看頁面：
注意：這部分代碼應(yīng)該是隱藏著的，當(dāng)用戶點擊選擇文件后才會把點擊選擇文件隱藏這個頁面代碼打開，所以在頭部我設(shè)置了css屬性：display:none;
當(dāng)然，這些操作是用戶選擇文件不上傳，當(dāng)點擊特定的上傳按鈕時才上傳文件的，所以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//不自動上傳
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ù)上傳，然后顯示上傳成功個數(shù)給改變一下：
1 $('#succ').text(1);2 $('#test2').addClass('layui-btn-disabled');
因為我這這邊只是上傳一個文件的，所以添加的1.
然后想刷新父頁面的刷新就行，根據(jù)需要寫。
接下來說下重新上傳事件：
重新上傳就等于剛打開這個彈出層第一次點擊一樣，所以我是這樣寫的：
1 //重新選擇
2 $('#test3').click(function(){3 $('#test1').trigger("click");4 });
test1就是剛彈出這個頁面點擊選擇文件的模板選擇器。重傳等于說是這個按鈕重新點擊了一次，所以給它加個點擊事件，雖然隱藏了，但是并不影響。
然后再之前操作中上傳成功之后把開始上傳這個按鈕給禁用了防止重復(fù)上傳。如果點擊重新上傳的話這個開始上傳按鈕應(yīng)該也是可以點擊的。
本來是想加再點擊重新上傳事件里面，但是考慮到用戶點擊重新上傳但由于一些原因并沒有選擇文件，這樣的話還是會造成一些不必要的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 });
頁面依次為：上傳完畢后頁面；點擊重新上傳按鈕頁面；點擊重新上傳按鈕選擇完文件后頁面：
??
??
至此，大致的基本都算是寫完了，接下來增加個功能進(jìn)度條！
進(jìn)度條我用的也是layui官網(wǎng)上給的進(jìn)度條demo，樣式還是可以的，近一段時間對于layui很癡迷。接下來說下實現(xiàn)過程：
首先進(jìn)度條顯示是在用戶點擊開始上傳之后才出現(xiàn)的，所以頁面上加上一個進(jìn)度條(element模板)：
1
2
3
在分割線下面，看頁面上：
當(dāng)然，這里給它設(shè)置為隱藏，在用戶點擊開始上傳時候再顯示出來，讓它從0%一直到100%顯示上傳成功后再次隱藏掉。設(shè)置為隱藏再style里面加個屬性：display:none;
前面說了，這個進(jìn)度條顯示是在用戶點擊開始上傳時候才有的，直到上傳成功結(jié)束，所以我把這個事件寫在用戶點擊上傳之后的方法before中：
1 ,before: function(obj){ //obj參數(shù)包含的信息，跟 choose回調(diào)完全一致。
2 $('.layui-progress').show();//進(jìn)度條顯示
3 }
這個方法寫在choose與done中間。這樣的話當(dāng)用戶點擊開始上傳之后進(jìn)度條就會顯示出來了。
接下來是實現(xiàn)進(jìn)度條的loading！
由于時間原因我直接用的是layui官網(wǎng)上給的demo，自己改改直接拿過來用，就是使用周期性定時器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%的時候清除定時器，用element.progress('demo', n+'%')給進(jìn)度條賦值。
為什么到80%？因為這短時間是上傳的時間，在文件上傳成功之后才返回100%；
在done里面獲取到返回的狀態(tài)，當(dāng)返回成功時用element.progress('demo', 100+'%');使進(jìn)度條到100%。
頁面演示為：開始上傳；上傳過程；上傳成功；上傳成功后：
?
??
??
上面就是所有的實現(xiàn)過程了，如果想實現(xiàn)多文件上傳或者圖片上傳只需要改改其中的一些代碼就可以了。
特此記一下，以后可以直接拿來用。
總結(jié)
以上是生活随笔為你收集整理的百度富文本编辑jsp上传_类百度富文本编辑器文件上传。的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： QT下以ADO连接ORACLE数据库
- 下一篇： 数据结构教程（第5版）李春葆 课后习题及