FCKeditor
文件上傳
Jar
包:
?
幫助文檔:
?
Site
文件夾下的
index.html
文件
?
通過幫助文檔我們知道了,要成功實現上傳下載功能,一共分為
2
兩個步驟:
第一步
我們查看到了
web.xml
中提供的
servlet
,那我我就就把他放大我們項目中的
web.xml
文檔中。
<!--
文件上傳
-->
?
<
servlet
>
?????
<
servlet-name
>
ConnectorServlet
</
servlet-name
>
???????
<
servlet-class
>
?????????
net.fckeditor.connector.ConnectorServlet
?????
</
servlet-class
>
?????
<
load-on-startup
>
1
</
load-on-startup
>
???
</
servlet
>
???
<
servlet-mapping
>
?????
<
servlet-name
>
ConnectorServlet
</
servlet-name
>
?????
<
url-pattern
>
???????
/fckeditor/editor/filemanager/connectors/*
<!--
映射到指定的
url
位置
-->
?????
</
url-pattern
>
</
servlet-mapping
>
第二步
在項目
src
文件下新建一個文本文件,名字:
fckeditor.properties
(注意:文件名稱一定要相同),在文件中編寫:
connector.userActionImpl=net.fckeditor.requestcycle.impl.EnabledUserAction
。
大功告成!來看看效果圖吧!
上傳按鈕也同理,爽吧
~~~
上傳中文亂碼
但是,我們在上傳過程中會遇到很多問題,其中要上傳的文件名稱為中文時,我們上傳到服務器上的文件名稱就會變成亂碼。
解決方案:
首先,我們遇到這這樣的問題,我們要先檢查項目中
fckeditor
文件夾下的
editor
文件夾下的
filemanager
文件夾
browser
文件夾下
default
文件夾
js
文件夾下的
frmupload.html
文件
我們來查看一下
frmupload.html
文件:
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=utf-8"
>
<!—
我們可以看到 在使用
getPost
時 我們采用的是
UTF-8
編碼格式 所以
frmupload.html
沒有問題
-->
<
link
href
=
"browser.css"
type
=
"text/css"
rel
=
"stylesheet"
>
<
script
type
=
"text/javascript"
src
=
"js/common.js"
></
script
>
<
script
type
=
"text/javascript"
>
?
既然
frmupload.html
文件沒有問題,那么我們就來檢查一下是不是
web.xml
文件中出了什么問題。
<
servlet
>
<
servlet-name
>
ConnectorServlet
</
servlet-name
>
????
<servlet-class>net.fckeditor.connector.ConnectorServlet</servlet-class>
????
<
load-on-startup
>
1
</
load-on-startup
>
</
servlet
>
<
servlet-mapping
>
<
servlet-name
>
ConnectorServlet
</
servlet-name
>
<
url-pattern
>
/fckeditor/editor/filemanager/connectors/*
<!--
映射到指定的
url
位置
-->
</
url-pattern
>
</
servlet-mapping
>
我們通過
web.xml
文件中的上傳文件配置可以看出,配置文件調用了
net.fckeditor.connector.ConnectorServlet
文件,那么我們接下來就來找到
ConnectorServlet
文件。
發現無法打開啊,這是我就需要調用
fckeditor-java-2.6-src.zip
了
好了,通過
fckeditor-java-2.6-src.zip
包的幫助,我們順利查看到了
ConnectorServlet
文件的源碼,但是我們是不能在這對
ConnectorServlet
文件進行修改的,那我們不妨把他復制出去,我們想怎么改就怎么改。
在項目
src
包中創建
net.igit.fckeditor.connector
包(可以定義),在自定義的包下新建
ConnectorServlet.Class
文件,把我們的從源碼中復制來的源碼粘貼過來,我們不需要動它的任何源碼,只需要把報錯的地方導包即可。
在
FCKeditor2.6
以后,
FCKeditor
把主要修改上傳功能權限的修改都放在了
fckeditor-java-core-2.6.jar
中的
net.fckeditor.connector
包中的
Dispatcher.class
文件下,同理,我們也在自定義的
net.igit.fckeditor.connector
包下新建一個
Dispatcher.class
文件,把
Dispatcher.class
文件的源碼復制過去,報錯的地方導包。
在
Dispatcher.class
文件下修改:
源碼:
UploadResponse doPost(
final
HttpServletRequest request) {
logger
.debug(
"Entering Dispatcher#doPost"
);
……
try
{
????
List<FileItem> items = upload.parseRequest(request);
……
}
修改后:
GetResponse doGet(
final
HttpServletRequest request) {
????
logger
.debug(
"Entering Dispatcher#doGet"
);
????
……
upload.setHeaderEncoding("UTF-8");
?
//
自己改動 解決上傳中文名文件出現亂碼問題
try
{
????
List<FileItem> items = upload.parseRequest(request);
……
}
?
創建中文名目錄出現亂碼問題
修改
Dispatcher
類
源碼:
GetResponse doGet(
final
HttpServletRequest request) {
????
logger
.debug(
"Entering Dispatcher#doGet"
);
????
……
try
{
????????
if
(command.equals(Command.
CREATE_FOLDER
)) {
?????????????
String newFolderNameStr = request
????????
……
}
修改后:
GetResponse doGet(
final
HttpServletRequest request) {
????
logger
.debug(
"Entering Dispatcher#doGet"
);
????
……
if
(command.equals(Command.
CREATE_FOLDER
)) {
????????
String tempStr = request.getParameter(
"NewFolderName"
);
?????????????
try
{
??????????????????
tempStr =
new
String(tempStr.getBytes(
"iso8859-1"
),
"UTF-8"
);
????
}
catch
(UnsupportedEncodingException e) {
??????????????????
e.printStackTrace();
?????????????
}
?????????????
String newFolderNameStr = tempStr;
??
……
}
引用中文名圖片無法正常顯示
修改
Dispatcher
類
源碼:
UploadResponse doPost(
final
HttpServletRequest request) {
????
logger
.debug(
"Entering Dispatcher#doPost"
);
????
……
String fileName = FilenameUtils.
getName
(uplFile.getName());
????
logger
.debug(
"Parameter NewFile: {}"
, fileName);
????
……
}
修改后:
UploadResponse doPost(
final
HttpServletRequest request) {
????
logger
.debug(
"Entering Dispatcher#doPost"
);
????
……
String fileName = FilenameUtils.
getName
(uplFile.getName());
??
????
……
String filrNameX = fileName.substring(0, fileName.indexOf(
"."
));
??
????
String
extensionStr = fileName.substring(fileName.indexOf(
"."
));
??
????
filrNameX = UUID.
randomUUID
().toString()+extensionStr;
??
????
fileName = filrNameX;
??
????
logger
.debug(
"Parameter NewFile: {}"
, fileName);
??
……
}
上傳文件格式設置
我們要修改
FCKeditor
上傳文件類型,要從客戶端和服務器兩方面修改
服務端
從服務端修改,我們就要參考文檔:
幫助文檔:
?
我們從
Referenced Libraries
中
fckeditor-java-core-2.6.jar
下的
net.fckeditor.handlers
包中的
default..properties
文件中:
connector.resourceType.file.extensions.allowed =
7z|aiff|asf|avi|bmp|csv|doc|fla|flv|gif|gz|gzip|jpeg|jpg|mid|mov|mp3|mp4|mpc|mpeg|mpg|ods|odt|pdf|png|ppt|pxd|qt|ram|rar|rm|rmi|rmvb|rtf|sdc|sitd|swf|sxc|sxw|tar|tgz|tif|tiff|txt|vsd|wav|wma|wmv|xls|xml|zip
connector.resourceType.image.extensions.allowed =
bmp|gif|jpeg|jpg|png
connector.resourceType.flash.extensions.allowed =
swf|fla
connector.resourceType.media.extensions.allowed =
aiff|asf|avi|bmp|fla|flv|gif|jpeg|jpg|mid|mov|mp3|mp4|mpc|mpeg|mpg|png|qt|ram|rm|rmi|rmvb|swf|tif|tiff|wav|wma|wmv
粘貼到自定義的
fckeditor.properties
文件中修改
客戶端
找到
fckeditor
文件夾下的
fckconfig.js
文件,找到:
FCKConfig.LinkUploadAllowedExtensions
= ".(7z|aiff|asf|avi|bmp|csv|doc|fla|flv|gif|gz|gzip|jpeg|jpg|mid|mov|mp3|mp4|mpc|mpeg|mpg|ods|odt|pdf|png|ppt|pxd|qt|ram|rar|rm|rmi|rmvb|rtf|sdc|sitd|swf|sxc|sxw|tar|tgz|tif|tiff|txt|vsd|wav|wma|wmv|xls|xml|zip)$" ;
????????
FCKConfig.ImageUploadAllowedExtensions
???
= ".(jpg|gif|jpeg|png|bmp)$" ;
FCKConfig.FlashUploadAllowedExtensions
???
= ".(swf|flv)$" ;
粘貼到自定義的
myconfig.js
文件中修改
?
上傳文件大小控制
修改
Dispatcher
類
源碼:
UploadResponse doPost(
final
HttpServletRequest request) {
????
logger
.debug(
"Entering Dispatcher#doPost"
);
???
……
if
(type.isDeniedExtension(FilenameUtils.
getExtension
(fileName)))
????????
uploadResponse = UploadResponse.
getInvalidFileTypeError
();
????????
// Secure image check (can't be done if QuickUpload)
????????
else
if
(type.equals(ResourceType.
IMAGE
)
????????
&& PropertiesLoader.
isSecureImageUploads
()
????????
&& !UtilsFile.
isImage
(uplFile.getInputStream())) {
????????
uploadResponse = UploadResponse.
getInvalidFileTypeError
();
????
}
else
{
????????
……
}
修改后:
UploadResponse doPost(
final
HttpServletRequest request) {
????
logger
.debug(
"Entering Dispatcher#doPost"
);
……
if
(type
isDeniedExtension(FilenameUtils.
getExtension
(fileName))) {
????????
uploadResponse = UploadResponse.
getInvalidFileTypeError
();
????????
}
else
if
(type.equals(ResourceType.
IMAGE
)
????????
????
&& PropertiesLoader.
isSecureImageUploads
()
?????????????
&& !UtilsFile.
isImage
(uplFile.getInputStream())) {
?????????????
uploadResponse = UploadResponse.
getInvalidFileTypeError
();
????????
}
else
if
(uplFile.getSize() > 10 * 1024) {
//
檢查文件大小
?????????????
uploadResponse = UploadResponse
?????????????
.
getInvalidCurrentFolderError
();
????????
}
else
{
……
}
自定義的
UploadResponse
類,除了內容全部拷貝
FCKeditor
中
UploadResponse
類的內容外,需要增加一個錯誤常量和一個錯誤方法:
public
static
final
int
EN_INVALID_FILE_SIZE_ERROR
= 204;
????
public
static
UploadResponse getInvalidFileSizeError() {
????????
LocalizedMessages lm = LocalizedMessages.
getInstance
(ThreadLocalData.
getRequest
());
????????
return
new
UploadResponse(
EN_INVALID_FILE_SIZE_ERROR
, lm.getInvalidFileTypeSpecified());
}
以上服務器端修改完成。然后需要修改
WebRoot/fckeditor/editor/dialog/fck_image/fck_image.js
文件。在其中加入對我們新定義的
205
方法的
alert
語句:
case 204 : alert( "A file is too big. You should change the file" ) ;
return ;
都是自己學到的東西 大家如果有什么問題 可以一起探究 呵呵
FCKeditor 2