开发：fckeditor的配置以及结合springmvc上传图片

转载

wx5a2f2700db360 2022-03-15 10:55:26

jsp代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%@ include file="/WEB-INF/back_page/head.jsp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

$(function(){

var tObj;

$("#tabs a").each(function(){

if($(this).attr("class").indexOf("here") == 0){tObj = $(this)}

$(this).click(function(){

var c = $(this).attr("class");

if(c.indexOf("here") == 0){return;}

var ref = $(this).attr("ref");

var ref_t = tObj.attr("ref");

tObj.attr("class","nor");

$(this).attr("class","here");

$(ref_t).hide();

$(ref).show();

tObj = $(this);

if(ref == '#tab_2'){//可以在ckeditor的config文件中找到你要修改的属性，然后在这里配置成你想要的就可以了

var fck = new FCKeditor("productdesc");//新建一个FCKeditor对象

fck.BasePath = "/res/fckeditor/";设置路径

fck.Height = 400 ;

fck.Config["ImageUploadURL"] = "/upload/uploadFck.do";

fck.ReplaceTextarea();

}

});

//上传图片，到另外一台图片服务器

function uploadPic(){

//定义参数

var options = {

url : "/upload/uploadPic.do",//提交到springmvc的上传图片方法

dataType : "json",

type : "post",

success : function(data){

//回调二个路径

//url

//path

$("#allImgUrl").attr("src",data.url);

$("#path").val(data.path);

}

};

//jquery.form使用方式

$("#jvForm").ajaxSubmit(options);

}

</script>

</head>

<body>

</form>

</div>

</span>

</h2>

<tr>

商品类型:</td><td width="80%" class="pn-fcontent">

<c:forEach items="${types }" var="type">

</c:forEach>

</select>

</td>

</tr>

<tr>

商品名称:</td><td width="80%" class="pn-fcontent">

</td>

</tr>

<tr>

商品品牌:</td><td width="80%" class="pn-fcontent">

<option value="">请选择品牌</option>

<c:forEach items="${brands }" var="brand">

<option value="${brand.id }">${brand.name }</option>

</c:forEach>

</select>

</td>

</tr>

<tr>

商品毛重:</td><td width="80%" class="pn-fcontent">

<input type="text" value="0.6" class="required" name="weight" maxlength="10"/>KG

</td>

</tr>

<tr>

材质:</td><td width="80%" class="pn-fcontent">

<c:forEach items="${features }" var="feature">

<input type="checkbox" value="${feature.id }" name="feature"/>${feature.name }

</c:forEach>

</td>

</tr>

<tr>

颜色:</td><td width="80%" class="pn-fcontent">

<c:forEach items="${colors }" var="color">

<input type="checkbox" value="${color.id }" name="color"/>${color.name }

</c:forEach>

</td>

</tr>

<tr>

尺码:</td><td width="80%" class="pn-fcontent">

<input type="checkbox" name="size" value="S"/>S

<input type="checkbox" name="size" value="M"/>M

<input type="checkbox" name="size" value="L"/>L

<input type="checkbox" name="size" value="XL"/>XL

<input type="checkbox" name="size" value="XXL"/>XXL

</td>

</tr>

<tr>

状态:</td><td width="80%" class="pn-fcontent">

<input type="checkbox" name="isNew" value="1"/>新品

<input type="checkbox" name="isCommend" value="1"/>推荐

<input type="checkbox" name="isHot" value="1"/>热卖

</td>

</tr>

<tr>

上传商品图片(90x150尺寸):</td>

注:该尺寸图片必须为90x150。

</td>

</tr>

<tr>

</td>

</tr>

</tbody>

<tr>

<td >

</td>

</tr>

</tbody>

<tr>

<td >

</td>

</tr>

</tbody>

<tbody>

<tr>

</td>

</tr>

</tbody>

</table>

</form>

</div>

</body>

</html>

java代码如下（使用的是springmvc，在这之前注意配置springmvc上传图片的xml）：

package cn.itcast.core.controller.admin;

import java.io.IOException;

import java.text.DateFormat;

import java.text.SimpleDateFormat;

import java.util.Date;

import java.util.Map;

import java.util.Map.Entry;

import java.util.Random;

import java.util.Set;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import net.fckeditor.response.UploadResponse;

import org.apache.commons.io.FilenameUtils;

import org.json.JSONObject;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestParam;

import org.springframework.web.multipart.MultipartFile;

import org.springframework.web.multipart.MultipartHttpServletRequest;

import cn.itcast.common.web.ResponseUtils;

import cn.itcast.core.web.Constants;

import com.sun.jersey.api.client.Client;

import com.sun.jersey.api.client.WebResource;

/**

* 上传图片

* 商品

* 品牌

* 商品介绍Fck

* @author lx

@Controller

public class UploadController {

//上传图片，这里知道请求的文件名，下面的方法是不知道请求的文件名

@RequestMapping(value = "/upload/uploadPic.do")

public void uploadPic(@RequestParam(required = false) MultipartFile pic,HttpServletResponse response){

//扩展名

String ext = FilenameUtils.getExtension(pic.getOriginalFilename());

//图片名称生成策略

DateFormat df = new SimpleDateFormat("yyyyMMddHHmmssSSS");

//图片名称一部分

String format = df.format(new Date());

//随机三位数

Random r = new Random();

// n 1000 0-999 99

for(int i=0 ; i<3 ;i++){

format += r.nextInt(10);

}

//实例化一个Jersey

Client client = new Client();

//保存数据库

String path = "upload/" + format + "." + ext;

//另一台服务器的请求路径是?

String url = Constants.IMAGE_URL + path;

//设置请求路径

WebResource resource = client.resource(url);

//发送开始 POST GET PUT

try {

resource.put(String.class, pic.getBytes());

} catch (IOException e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

//返回二个路径

JSONObject jo = new JSONObject();

jo.put("url", url);

jo.put("path",path);

ResponseUtils.renderJson(response, jo.toString());

}

//上传Fck图片

@RequestMapping(value = "/upload/uploadFck.do")

public void uploadFck(HttpServletRequest request,HttpServletResponse response){//因为此时并不知道是哪一个文件，所以直接使用request来获取

//强转request 支持多个文件上传

MultipartHttpServletRequest mr= (MultipartHttpServletRequest)request;

//获取值支持多个

Map<String, MultipartFile> fileMap = mr.getFileMap();

//遍历Map

Set<Entry<String, MultipartFile>> entrySet = fileMap.entrySet();

for(Entry<String, MultipartFile> entry : entrySet){

//上传上来的图片

MultipartFile pic = entry.getValue();

//扩展名

String ext = FilenameUtils.getExtension(pic.getOriginalFilename());

//图片名称生成策略

DateFormat df = new SimpleDateFormat("yyyyMMddHHmmssSSS");

//图片名称一部分

String format = df.format(new Date());

//随机三位数

Random r = new Random();

// n 1000 0-999 99

for(int i=0 ; i<3 ;i++){

format += r.nextInt(10);

}

//实例化一个Jersey

Client client = new Client();

//保存数据库

String path = "upload/" + format + "." + ext;

//另一台服务器的请求路径是?

String url = Constants.IMAGE_URL + path;

//设置请求路径

WebResource resource = client.resource(url);

//发送开始 POST GET PUT

try {

resource.put(String.class, pic.getBytes());

} catch (IOException e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

//返回Url给Fck fckeditor的java的jar包，名称为java-core.jar

//成功后返回一个fckeditor的response对象

UploadResponse ok = UploadResponse.getOK(url);

//response 返回对象

//response write

//response print

try {

response.getWriter().print(ok);//输出对象使用print()方法

} catch (IOException e) {

e.printStackTrace();

}

上一篇：开发：一句jquery代码实现全选功能及实现批量删除的js代码

下一篇：开发：ajax中输出信息到页面出现中文乱码的一种解决方案

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

开发：fckeditor的配置以及结合springmvc上传图片

开发：fckeditor的配置以及结合springmvc上传图片

51CTO博客