1. 程式人生 > >UEditor中上傳圖片的步驟

UEditor中上傳圖片的步驟

local detail pen oca fin ges toolbar man .config

1. 找到ueditor中ueditor.config.js 修改serverUrl屬性值,
serverUrl: URL + "jsp/controller.jsp"

toolbars定義的是編輯器裏顯示的button 按鈕組

2.
將ueditor/jsp中lib下的jar拷貝到WEB——INF下的lib下ueditor.config.js中的controller。jsp才可以用。


3.更改ueditor/1.4.3/dialogs/image下image.js文件中的actionUrl屬性值,
actionUrl = "http://localhost:8081/sys/others/uploadup",
這個地址是自己上傳圖片的地址。

4.關註uploadSuccess這個方法,這個是上傳圖片後的回調函數。ret是返回的數據,返回數據是json串,參考jsp/src/com/baidu/ueditor/defice下的State和BaseState類。

uploader.on(‘uploadSuccess‘, function (file, ret) {
var $file = $(‘#‘ + file.id);
try {
var responseText = (ret._raw || ret),
json = utils.str2json(responseText);
if (json.state == ‘SUCCESS‘) {
_this.imageList.push(json);
$file.append(‘<span class="success"></span>‘);
} else {
$file.find(‘.error‘).text(json.state).show();
}
} catch (e) {
$file.find(‘.error‘).text(lang.errorServerUpload).show();
}
});

5.關註getInserList函數這個函數循環imageList中的數據,json串中key值是url,value值是url地址。

getInsertList: function () {
var i, data, list = [],
align = getAlign(),
prefix = editor.getOpt(‘imageUrlPrefix‘);
for (i = 0; i < this.imageList.length; i++) {
data = this.imageList[i];
list.push({
src: prefix + data.url,
_src: prefix + data.url,
title: data.title,
alt: data.original,
floatStyle: align
});
}
return list;
}


6.上傳圖片的後臺代碼段。
這裏的upfile 是前端上傳的所有圖片的 對象
state 是引用的是jsp/src/com/baidu/ueditor/defice下的State和BaseState中的類
putInfo方法設置返回數據,這裏key值必須是“url”

/**
* 上傳圖片
*/
@RequestMapping(value = "/others/uploadup", method = RequestMethod.POST)
@ResponseBody
public String uploadup(MultipartHttpServletRequest request){
State state = null;
state = new BaseState(true);
List<MultipartFile> files = (List<MultipartFile>) request.getFiles("upfile");
try {
if(files!=null){
Integer id = new Integer(0);
for(int i=0;i<files.size();i++){
MultipartFile file = files.get(i);
id = othersManageService.insertImages(file);
ImagesDetail imd = othersManageService.findImagesById(id);
state.putInfo("url", imd.getUrl());
}
}
} catch (Exception e) {
e.printStackTrace();
}
String resultState = state.toJSONString();
return resultState;
}

UEditor中上傳圖片的步驟