fck配置,以及上傳圖片到指定的路徑

1.下載相應的fck文件


2.引進js

<script type="text/javascript" src="/res/fckeditor/fckeditor.js"></script>
<script src="/res/common/js/jquery.js" type="text/javascript"></script>
3.在放置文本編輯器位置放一個textarea

<tbody id="tab_2" style="display: none">
				<tr>
					<td >
						<textarea rows="10" cols="10" id="productdesc" name="description"></textarea>
					</td>
				</tr>
			</tbody>
4.寫js將textarea轉化爲文本編輯器

var fck = new FCKeditor("productdesc");
				fck.BasePath = "/res/fckeditor/";
				fck.Height = 400 ;
				//圖片上傳的路經,調用後臺的controller
				fck.Config["ImageUploadURL"] = "/upload/uploadFck.do";
				fck.ReplaceTextarea();
5.寫圖片上傳的後臺方法,由於不知道fck上傳圖片的名字,就不能像以前那樣,下面我主要介紹如何實現圖片上傳的指定的位置,並且將上傳的url返回給fck用於顯示

返回url給fck要藉助一個fck的jar文件java-core\2.6\java-core-2.6.jar

6.下面我寫上傳並返回url的後臺代碼


//fck上傳圖片到後臺
	@RequestMapping(value="/upload/uploadFck.do")
	public void uploadFck(HttpServletRequest request,HttpServletResponse response){
		//強轉request
		MultipartHttpServletRequest mh=(MultipartHttpServletRequest)request;
		//獲取文件
		Map<String, MultipartFile> fileMap = mh.getFileMap();
		//遍歷map
		Set<Entry<String,MultipartFile>> entrySet = fileMap.entrySet();
		for (Entry<String, MultipartFile> entry : entrySet) {
			//上傳上來的圖片
			MultipartFile pic = entry.getValue();
			//獲取擴展名的方法
			String extension = FilenameUtils.getExtension(pic.getOriginalFilename());
			//圖片名稱生成策略,根據時間生成
			DateFormat df=new SimpleDateFormat("yyyyMMddHHmmssSSS");
			//圖片的一部分
			String format = df.format(new Date());
			//隨機三位數
			Random random=new Random();
			for(int i=0;i<3;i++){
				format+=random.nextInt(10);
			}
			//實例化jersey實例
			Client client=new Client();
			//保存到數據庫
			String path="upload/"+format+"."+extension;
			
			//另一臺tomcat的請求參數
			String url=Conts.IMAGE_URL+path;
			//設置請求路徑
			WebResource resource = client.resource(url);
			
			try {
				resource.put(String.class,pic.getBytes());
			
			} catch (IOException e) {
				e.printStackTrace();
			}
			UploadResponse ok=UploadResponse.getOK(url);
			//response的write方法返回前臺爲字符串,而print返回的是object類型的數據
			try {
				response.getWriter().print(ok);
			} catch (IOException e) {
				e.printStackTrace();
			}
			
		}






發佈了104 篇原創文章 · 獲贊 37 · 訪問量 21萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章