项目需求:在kindeditor编辑文字并有图片上传,图片单走File上传,但是可能是单个也可能是多个。
问题:因为kindeditor上传的方式是ajax,但是在ajax里面如果定义input标签的话 只能获取一个图片的信息,所以我想到了点击提交以后先把图片上传到数据库中(用二进制的方法),接着在调用ajax上传kindeditor里面的文字,标题,以及类别。
点击添加按钮,添加文本框
以下为JS代码:
var count=0;
function additem(id)
{
var row,cell,str;
row = document.getElementById(id).insertRow();
if(row != null )
{
cell = row.insertCell();
count++;
cell.innerHTML="<input type=\"file\" name='file"+count+"' id='file' multiple='multiple'/><input type=\"button\" value=\"删除\" οnclick=\'deleteitem(this);\'>";
}
}
function deleteitem(obj)
{
var curRow = obj.parentNode.parentNode;
tb.deleteRow(curRow.rowIndex);
}
页面代码:
<table id="tb"></table>
<input name="button" type=button onClick='additem("tb")' value="添加">
接着是上传的代码
前端方法:
function uploadFile(){
$("#myForm").submit();
upload();
}
以下部分是kindeditor上传
function upload(){
var title=$("#title").val();
var type=$("#type").val();
stext=editor.text();
content=editor.html();
$.ajax({
url:'<%=basePath%>test/fileupload',
data:{'title':title,'type':type,'content':content,'stext':stext},
dataType:'JSON',
type:'post',
success:function(data){
if(data=="success"){
alert("上传成功");
dialog.hide();
window.parent.window.c.loadData();
window.parent.window.c.reload();
}else{
alert("上传失败");
}
}
});
}
Java后台代码:
图片以二进制的方式存进数据库中,并包括了缩小图片比例的代码:
@ResponseBody
@RequestMapping("/imageUpload")
public String imgUpload(MultipartHttpServletRequest multipart,HttpServletResponse response){
Iterator item=multipart.getFileNames();
while(item.hasNext()){
String fileName=(String) item.next();
MultipartFile file=multipart.getFile(fileName);
String fileExt = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".") + 1).toLowerCase();
SimpleDateFormat df=new SimpleDateFormat("yyyyMMddHHmmss");
String newfileName=df.format(new Date())+"_"+new Random().nextInt(1000)+"."+fileExt;
try {
TestFile testFile=new TestFile();
SimpleDateFormat sidf=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
String type=newfileName.substring(newfileName.lastIndexOf(".")+1).toLowerCase();
testFile.setFileName(newfileName);
testFile.setFileType(type);
List<TestFile> list=testFileServiceI.getMaxFileIndex();
if(list.size()==0){
testFile.setFileIndex(1);
}else{
TestFile tf=list.get(0);
testFile.setFileIndex(tf.getFileIndex()+1);
}
testFile.setStatus(1);
testFile.setUpdateTime(sidf.format(new Date()));
InputStream input=file.getInputStream();
ByteArrayOutputStream output=new ByteArrayOutputStream();
byte[] buffer=new byte[4096];
int n=0;
while(-1!=(n=input.read(buffer))){
output.write(buffer, 0, n);
}
testFile.setFileData(output.toByteArray());
Thumbnails.of(file.getInputStream()).scale(0.25f);//通过Thumbnails实现图片缩列图,需要单独下jar包
MultipartFile files=multipart.getFile(fileName);
InputStream inputStream=files.getInputStream();
ByteArrayOutputStream outputs=new ByteArrayOutputStream();
byte[] buffer1=new byte[4096];
int n1=0;
while(-1!=(n1=inputStream.read(buffer1))){
outputs.write(buffer1, 0, n1);
}
testFile.setImageThumb(outputs.toByteArray());
testFileServiceI.addObject(testFile);//保存在数据库中
} catch (Exception e) {
e.printStackTrace();
return null;
}
}
return null;
}
正常的kindeditor上传到服务器的代码:
@ResponseBody
@RequestMapping(value="/fileUpload", method = RequestMethod.POST)
public Object imageUpload(HttpServletRequest request,HttpServletResponse response){
String savePath=request.getSession().getServletContext().getRealPath("")+"/attached";
//文件保存路径
String saveUrl=request.getSession().getServletContext().getRealPath("")+"/attached/images/";
TestFile testFile=new TestFile();
//定义能上传的文件格式
HashMap<String, String> extMap=new HashMap<String, String>();
extMap.put("image", "gif,jpg,jpeg,png,bmp");
extMap.put("flash", "swf,flv");
extMap.put("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb");
extMap.put("file", "doc,docx,xls,xlsx,ppt,htm,html,xml,txt,zip,rar,gz,bz2");
//最大的文件大小
long maxSize = 1000000;
response.setContentType("text/html; charset=UTF-8");
if(!ServletFileUpload.isMultipartContent(request)){
return getError("请选择文件");
}
File uploadDir=new File(savePath);
if(!uploadDir.isDirectory()){
uploadDir.mkdirs();
//return getError("上传目录不存在");
}
if(!uploadDir.canWrite()){
return getError("没有权利");
}
String dirName=request.getParameter("dir");
if(dirName==null){
dirName="image";
}
if(!extMap.containsKey(dirName)){
return getError("目录名不正确");
}
savePath+=dirName+"/";
saveUrl+=dirName+"/";
File saveDirFile=new File(savePath);
if(!saveDirFile.exists()){
saveDirFile.mkdirs();
}
SimpleDateFormat sdf=new SimpleDateFormat("yyyyMMdd");
String ymd=sdf.format(new Date());
savePath+=ymd+"/";
saveUrl+=ymd+"/";
File dirFile=new File(savePath);
if(!dirFile.exists()){
dirFile.mkdirs();
}
FileItemFactory factory=new DiskFileItemFactory();
ServletFileUpload upload=new ServletFileUpload(factory);
upload.setHeaderEncoding("UTF-8");
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
Iterator item=multipartRequest.getFileNames();
while(item.hasNext()){
String fileName=(String) item.next();
MultipartFile file=multipartRequest.getFile(fileName);
if(file.getSize()>maxSize){
return getError("文件太大了");
}
String fileExt = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".") + 1).toLowerCase();
if(!Arrays.asList(extMap.get(dirName).split(",")).contains(fileExt)){
return getError("上传的文件扩展名是不容许的扩展名");
}
SimpleDateFormat df=new SimpleDateFormat("yyyyMMddHHmmss");
String newfileName=df.format(new Date())+"_"+new Random().nextInt(1000)+"."+fileExt;
try {
File uploadFile=new File(savePath,newfileName);
ByteStreams.copy(file.getInputStream(), new FileOutputStream(uploadFile));
} catch (Exception e) {
e.printStackTrace();
return getError("上传文件失败!");
}
JSONObject obj = new JSONObject();
obj.put("error", 0);
obj.put("url", saveUrl + newfileName);
return obj;
}
return null;
}
private String getError(String message) { JSONObject obj = new JSONObject(); obj.put("error", 1); obj.put("message", message); return obj.toJSONString(); }
以上就是完成项目需求的解决办法,不知道其他大神还有没有其他方法。作为菜鸟的我,只能想到此方法