當前位置:首頁 » 文件管理 » ueditor多圖上傳

ueditor多圖上傳

發布時間: 2024-10-20 07:43:03

⑴ ueditor上傳圖片是哪個文件夾,如何限制 上傳圖片的大小(寬高)。

ueitor默認上傳路徑為:ueditor/jsp/upload/下邊以日期分文件夾(只有你正式上傳後這個目錄才會存在);這個路徑也是可配的;在jsp文件夾下,有一個fileUp.jsp,其中有如下代碼:

Uploaderup=newUploader(request);
up.setSavePath("upload");//保存路徑

將upload改成你想傳的路徑就好了


第二點問題:文件大小也能配置,同樣是在fileUp.jsp中,不過這里只能配大小,就是幾M,幾KB,代碼如下:

up.setAllowFiles(fileType);
up.setMaxSize(10000);//允許的文件最大尺寸,單位KB

圖片尺寸的大小也是能修改的:這個修改文件ueditor.config.js文件,找如下代碼:

//圖片上傳配置區
,imageUrl:URL+"jsp/imageUp.jsp"//圖片上傳提交地址
,imagePath:URL+"jsp/"//圖片修正地址,引用了fixedImagePath,如有特殊需求,可自行配置
//,imageFieldName:"upfile"//圖片數據的key,若此處修改,需要在後台對應文件修改對應參數
//,compressSide:0//等比壓縮的基準,確定maxImageSideLength參數的參照對象。0為按照最長邊,1為按照寬度,2為按照高度
,maxImageSideLength:2000


這個是參照jsp版本的,其它版本的目錄結構基本類似,就是文件格式是.asp,或者php,都一樣

⑵ ueditor編輯器多圖上傳為什麼順序打亂了

我上一個版本用的是ueditor1.3.6,自從1.4.2版以後,「前端上傳模塊統一改用webuploader」,ueditor在多圖上傳一直考慮漏掉了圖片順序的問題。
我的網站在用戶上傳圖片文章的時候,使用多圖上傳,點確認後,編輯框內的圖片順序是亂的。
看webuploader的問題在於多線程上傳,ueditor對「uploadSuccess」的處理是上傳成功一張,就加入到數組中,這樣如果圖片上傳完成順序是亂的,最終加入文本框的順序也亂了。
我這里修改了一下js,供大家參考,希望ueditor能改進這個問題:
vim dialogs/image/image.js

716 uploader.on('uploadSuccess', function (file, ret) {
717 var $file = $('#' + file.id);
718 try {
719 var responseText = (ret._raw || ret),
720 json = utils.str2json(responseText);
721 if (json.state == 'SUCCESS') {
722 _this.imageList[$file.index()] = json; // 按選擇好的文件列表順序存儲
723 $file.append('');
724 } else {
725 $file.find('.error').text(json.state).show();
726 }
727 } catch (e) {
728 $file.find('.error').text(lang.errorServerUpload).show();
729 }
730 });

vim dialogs/attachment/attachment.js

500 uploader.on('uploadSuccess', function (file, ret) {
501 var $file = $('#' + file.id);
502 try {
503 var responseText = (ret._raw || ret),
504 json = utils.str2json(responseText);
505 if (json.state == 'SUCCESS') {
506 _this.fileList[$file.index()] = json;
507 $file.append('');
508 } else {
509 $file.find('.error').text(json.state).show();
510 }
511 } catch (e) {
512 $file.find('.error').text(lang.errorServerUpload).show();
513 }
514 });

vim dialogs/video/video.js

729 uploader.on('uploadSuccess', function (file, ret) {
730 var $file = $('#' + file.id);
731 try {
732 var responseText = (ret._raw || ret),
733 json = utils.str2json(responseText);
734 if (json.state == 'SUCCESS') {
735 uploadVideoList[$file.index()] = {
736 'url': json.url,
737 'type': json.type,
738 'original':json.original
739 };
740 $file.append('');
741 } else {
742 $file.find('.error').text(json.state).show();
743 }
744 } catch (e) {
745 $file.find('.error').text(lang.errorServerUpload).show();
746 }
747 });

如上,都使用了$file.index()作為數組下標,可以保證圖片上傳後順序是按照用戶選擇圖片以後,加入到預覽窗口的順序。

⑶ php版ueditor如何實現文章圖片一起上傳

ueditor 里存放的是圖片的url地址,提交時不用做任何處理的,只要你處理好非同步上傳圖片路徑的php處理文件就行了,就是返回的圖片路徑是絕對路徑,放那裡都沒問題啦

⑷ ueditor多圖上傳,如何去掉p標簽

要直接沒有<p>標簽改起來有點麻煩,但是如果只是想排成一排,你可以去ueditor文件下找名稱為editor_all的js文件,然後找imageBlockLine : 'center';把center改成left

⑸ ueditor富文本編輯器上傳圖片怎麼配置

1. 前端配置項
前端需要配置 serverUrl 參數,修改 ueditor.config.js 里的 serverUrl 參數,改成伺服器端路徑,參考:URL + 'php/controller.php'
2. 後端配置項
後端配置項在 php/config.json 里配置,不同的上傳有各自的配置項。
修改上傳圖片路徑的參數是 imagePathFormat ,改成你的圖片文件夾路徑即可。

⑹ ueditor 怎麼自定義上傳文件的路徑啊求指導,,最好是有源碼

UEditor是由網路WEB前端研發部開發的所見即所得的開源富文本編輯器,具有輕量、可定製、用戶體驗優秀等特點。
開源基於BSD協議,所有源代碼在協議允許范圍內可自由修改和使用。
網路UEditor的推出,可以幫助不少網站開發者在開發富文本編輯器所遇到的難題,節約開發者因開發富文本編輯器所需要的大量時間,有效降低了企業的開發成本。
優點
1、體積小巧,性能優良,使用簡單
2、分層架構,方便定製與擴展
3、滿足不同層次用戶需求,更加適合團隊開發
4、豐富完善的中文文檔
5、多個瀏覽器支持:Mozilla, MSIE, FireFox, Maxthon,Safari 和Chrome
6、更好的使用體驗
7、擁有專業QA團隊持續支持,已應用在網路各大產品線上
使用步驟
1.添加jar包 jar包位置:文件根目錄下jsp的lib文件夾下,把jar包復制到web-inf下的lib文件夾下buildpath
2.修改config.js中的URL路徑,修改為UEidtor插件在自己工程中的正確根路徑
3.在jsp文件中先引入配置文件config.js然後再源碼文件all.js(注意順序)
4.載入容器和實例化容器
1.修改config.js配置文件URL為插件根目錄,一般是絕對路徑。

2.修改config.json中上傳圖片配置項中的訪問路徑前綴為項目名稱,根據情況修改上傳文件路徑和訪問路徑。
配置正確之後UEditor有上傳功能幫助我們上傳圖片。
但是上傳路徑會在項目部署的臨時文件夾下。 tomcat取消部署後,上傳文件就會和項目部署文件一起被刪除

3.實現把圖片上傳到自定義路徑
在處理上傳後的文件名稱的時候注意不要出現中文
要不然還需要做處理才能正確讀取文件!

4.(1)首先在jsp中覆蓋UEidtor獲取路徑的方法

//覆蓋UEditor中獲取路徑的方法
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
//判斷路徑 這里是config.json 中設置執行上傳的action名稱
if (action == 'uploadimage') {
return 'http://localhost:8080/maven-web/uploadImage.do';
} else if (action == 'uploadvideo') {
return '';
} else {
return this._bkGetActionUrl.call(this, action);
}
}
(2)首先在springmvc配置文件中配置

<!-- 上傳配置 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="defaultEncoding" value="UTF-8"></property>
</bean>

在controller中定義上傳和讀取文件的方法
/**
* SpringMVC 用的是 的MultipartFile來進行文件上傳
* 這里用@RequestParam()來指定上傳文件為MultipartFile
* @throws IOException
*/
@RequestMapping("uploadImage")
@ResponseBody//這里upfile是config.json中圖片提交的表單名稱
public Map<String,String> uploadImage(@RequestParam("upfile") CommonsMultipartFile upfile,HttpServletRequest request) throws IOException{
//文件原名稱
String fileName=upfile.getOriginalFilename();
//為了避免重復簡單處理
String nowName=new Date().getTime()+"_" + fileName;
if(!upimage.isEmpty()){
//上傳位置路徑
String path0 = "D:\\eclipseworkspace\\maven-web\\src\\main\\webapp\\upload\\"+nowName;
//按照路徑新建文件
File newFile = new File(path0);
//復制
FileCopyUtils.(upimage.getBytes(), newFile);
}
//返回結果信息(UEditor需要)
Map<String,String> map = new HashMap<String,String >();
//是否上傳成功
map.put("state", "SUCCESS");
//現在文件名稱
map.put("title", nowName);
//文件原名稱
map.put("original", fileName);
//文件類型 .+後綴名
map.put("type", fileName.substring(upfile.getOriginalFilename().lastIndexOf(".")));
//文件路徑
map.put("url", "/"+nowName+"/getImage.do");
//文件大小(位元組數)
map.put("size", upfile.getSize()+"");

return map;
}
/**
* 讀取文件
*/
@RequestMapping("{imgName}/getImage")
public void readImg(@PathVariable("imgName") String imgName, HttpServletResponse response)
throws Exception {
//設置文件的返回類型
response.setContentType("image/*");
//文件路徑(windows下是\\,linux下是//,都必須是絕對路徑)
String imgPath="D:\\eclipseworkspace\\maven-web\\src\\main\\webapp\\upload\\"+imgName;
//java中用File類來表示一個文件
File image = new File(imgPath);
//測試這個文件路徑是否存在(也就是這個文件是否存在)
if (!image.exists()) {
return;
}
//FileUtils.readFileToByteArray(File file)把一個文件轉換成位元組數組返回
response.getOutputStream().write(FileUtils.readFileToByteArray(image));
//java在使用流時,都會有一個緩沖區,按一種它認為比較高效的方法來發數據:
//把要發的數據先放到緩沖區,緩沖區放滿以後再一次性發過去,而不是分開一次一次地發.
//而flush()表示強制將緩沖區中的數據發送出去,不必等到緩沖區滿.
response.getOutputStream().flush();
response.getOutputStream().close();
}

熱點內容
昆明編程講師 發布:2024-10-20 09:27:07 瀏覽:102
二叉樹的遞歸遍歷演算法 發布:2024-10-20 09:25:42 瀏覽:467
電腦數據如何傳給伺服器 發布:2024-10-20 09:23:17 瀏覽:772
西門子編程代碼 發布:2024-10-20 09:19:00 瀏覽:261
計算器代碼java 發布:2024-10-20 09:18:54 瀏覽:986
哈弗h2哪個配置有天窗 發布:2024-10-20 09:17:17 瀏覽:807
ftp每隔5分鍾就斷一次連接 發布:2024-10-20 09:09:43 瀏覽:483
私有雲盤源碼 發布:2024-10-20 09:08:15 瀏覽:478
電腦的上傳速度怎麼調 發布:2024-10-20 09:01:18 瀏覽:872
我的世界伺服器淬煉要多少錢 發布:2024-10-20 08:54:10 瀏覽:952