1 Js功能分析
1.1 Index-add.jsp
1.2 Index-add.jsp
1.3 初始化common.js
init : function(data){
// 初始化图片上传组件
this.initPicUpload(data);
// 初始化选择类目组件
this.initItemCat(data);
},
1.4 初始化图片上传组件common.js
// 初始化图片上传组件
initPicUpload : function(data){
$(".picFileUpload").each(function(i,e){
var _ele= $(e);
_ele.siblings("div.pics").remove();
_ele.after('\
<div class="pics">\
<ul></ul>\
</div>');
// 回显图片
if(data && data.pics){
var imgs= data.pics.split(",");
for(var i in imgs){
if($.trim(imgs[i]).length > 0){
_ele.siblings(".pics").find("ul").append("<li><a href='"+imgs[i]+"' target='_blank'>" +
"<img src='"+imgs[i]+"' width='80' height='50'/></a></li>");
}
}
}
//给“上传图片按钮”绑定click事件
$(e).click(function(){
var form= $(this).parentsUntil("form").parent("form");
//打开图片上传窗口
KindEditor.editor(E3.kingEditorParams).loadPlugin('multiimage',function(){
var editor= this;
editor.plugin.multiImageDialog({
clickFn : function(urlList) {
var imgArray= [];
KindEditor.each(urlList, function(i, data) {
imgArray.push(data.url);
form.find(".pics ul").append("<li><a href='"+data.url+"' target='_blank'>" +
"<img src='"+data.url+"' width='80' height='50'/></a></li>");
});
form.find("[name=image]").val(imgArray.join(","));
editor.hideDialog();
}
});
});
});
});
},
1.5 E3--KindEditor
2 KindEditor文档
2.1 参考文档
使用的是KindEditor的多图片上传插件。
KindEditor 4.x 文档
2.2 参数
请求的url:/pic/upload
参数:MultiPartFileuploadFile
返回值:
可以创建一个pojo对应返回值。可以使用map
3 后台
3.1 业务逻辑
业务逻辑:
1、接收页面传递的图片信息uploadFile
2、把图片上传到图片服务器。使用封装的工具类实现。需要取文件的内容和扩展名。
3、图片服务器返回图片的url
4、将图片的url补充完整,返回一个完整的url。
5、把返回结果封装到一个Map对象中返回。
3.2 添加jar包
需要把commons-io、fileupload 的jar包添加到工程中。
<dependency>
<groupId>org.apache.commons</groupId>
<artifactId>commons-io</artifactId>
</dependency>
<!-- 新加:文件上传组件 -->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
</dependency>
3.3 Springmvc.xml--配置多媒体解析器
1、配置多媒体解析器。
<!-- 定义文件上传解析器 -->
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- 设定默认编码 -->
<property name="defaultEncoding"value="UTF-8"></property>
<!-- 设定文件上传的最大值5MB,5*1024*1024 -->
<property name="maxUploadSize"value="5242880"></property>
</bean>
3.4 Controller
package cn.e3mall.controller;
import cn.e3mall.common.utils.FastDFSClient;
import cn.e3mall.common.utils.JsonUtils;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.http.MediaType;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import java.util.HashMap;
import java.util.Map;
/**
* 图片上传处理Controller
*/
@Controller
public class PictureController {
@Value("${IMAGE_SERVER_URL}")
private String IMAGE_SERVER_URL;
@RequestMapping(value="/pic/upload", produces=MediaType.TEXT_PLAIN_VALUE+";charset=utf-8")
@ResponseBody
public StringuploadFile(MultipartFile uploadFile) {
try {
//把图片上传的图片服务器
FastDFSClient fastDFSClient = new FastDFSClient("classpath:conf/client.conf");
//取文件扩展名
String originalFilename =uploadFile.getOriginalFilename();
String extName =originalFilename.substring(originalFilename.lastIndexOf(".") + 1);
//得到一个图片的地址和文件名
String url =fastDFSClient.uploadFile(uploadFile.getBytes(), extName);
//补充为完整的url
url = IMAGE_SERVER_URL + url;
//封装到map中返回
Map result = new HashMap<>();
result.put("error", 0);
result.put("url", url);
return JsonUtils.objectToJson(result);
} catch (Exceptione) {
e.printStackTrace();
Map result = new HashMap<>();
result.put("error", 1);
result.put("message", "图片上传失败");
return JsonUtils.objectToJson(result);
}
}
}
4 解决浏览器兼容性的问题
4.1 分析
KindEditor的图片上传插件,对浏览器兼容性不好。
使用@ResponseBody注解返回java对象,Content-Type:application/json;charset=UTF-8,他的意义在于不走逻辑视图,将返回的数据转换成为json对象
返回字符串时:Content-Type:text/plan;charset=UTF-8
解决方法:所以都返回为String,就兼容性最好
4.2 几点改变
指定响应结果的content-type:
返回json字符串
4.3 测试
KindEditor的多图片上传插件最后响应的content-type是text/plan格式的json字符串。兼容性是最好的。