jsp页面
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%@ page import="java.util.Date"%><%@ taglib prefix="c" uri="/jsp/jstl/core" %><%@ taglib prefix="fn" uri="/jsp/jstl/functions"%> <%@ taglib prefix="fmt" uri="/jsp/jstl/fmt"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>${user.username }</title><script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.2.1.js"></script><script type="text/javascript" src="${pageContext.request.contextPath}/js/ajaxfileupload.js"></script><link rel="stylesheet" type="text/css" href="css/space.css"><link rel="stylesheet" type="text/css" href="css/red.css"><link type="image/x-icon" href="favicon.ico" rel="Shortcut Icon"><script language="javascript" type="text/javascript" src="js/My97DatePicker/WdatePicker.js"></script><script type="text/javascript" src="js/ckeditor/ckeditor.js"></script><script type="text/javascript">window.onload = function() {//加载文本编辑器:如果在这里加载，则不需要在textarea中添加class="ckeditor"属性CKEDITOR.replace('bodyEditor', {height : 500,removePlugins : 'resize,about',afterCreate : function() { this.sync(); }, afterBlur:function(){ this.sync(); } });}/* ajax 文件上传*/function upload() {//获取用户idvar filename = document.getElementById("filename").value;if ($.trim(filename) == "") { alert("请选择要上传的文件"); return; }console.log("test"); var result_msg = "";$.ajaxFileUpload({url: 'imagertalk', //这里是服务器处理的代码type: 'post',secureuri: false, //一般设置为falsefileElementId: 'filename', // 上传文件的id、name属性名dataType: 'json', //返回值类型，一般设置为json、application/jsondata: { filename: filename,}, //传递参数到服务器success: function (data, status) {if (data.key==1) {alert("文件成功处理出错!");} else {//把上传的图片名字保存到input里面$("#imgtalk").val(data.key);alert("文件成功上传！");} },error: function (data, status, e) {alert("错误：上传组件错误，请检察网络!");} });}function talk(){//获取说说标题var biao=$("#biao").val();//说说内容var nei=CKEDITOR.instances.bodyEditor.getData(); //图片是否为空//判断说说图片是否为空var img=$("#imgtalk").val();if(biao==""){alert("说说标题为空,请重新输入");return false;}else{if(nei==""){alert("说说内容为空,请重新输入");return false;}else{if(img==""){alert("你的说说图片未添加上,请检查后再发布说说");return false;}else{//提交表单$("#frmContainer").submit();return true;}}}}</script></head><body><!-- top文件引用 --><jsp:include page="topfixed.jsp"><jsp:param name="blogId" value="${blog.id }"/></jsp:include><div id="mainbox"><div class="lay_position"><!-- 头文件引用 --><jsp:include page="header.jsp"><jsp:param name="blogId" value="${blog.id }"/><jsp:param name="blogTitle" value="${blog.title }"/></jsp:include><!-- 博客 --><div id="LayPageContainer" class="lay_pageContainer"><div class="lay_lace_t"></div><div class="lay_lace_m"><div id="pageApp" class="page_app_base"><div class="bg_mode"><div class="box_ml bor"><div class="mode_gb"><div class="mode_gb_title bg2"><div class="bg_mode_gb_title"><h3><span id="topBar">写说说</span></h3></div></div><div id="pageHintArea" style="margin-top:-1px;"></div><form id="frmContainer" method="post" action="talkshuoshuo" ><input type="text" value="${user.userid }" name="user_id"> <div id="app_mod" class="mode_gb_cont"><div class="blog_write"><div id="blog-editor-container" class="mod_editor"><input value="" class="subject" id="biao" name="s_biao" type="text" placeholder="请在这里输入说说标题" maxlength="255" style="color: rgb(0, 0, 0); font-size: 26px; font-family: 微软雅黑; font-weight: normal;"><c:if test="${post == null}"><c:set var="crateTime" value="<%=new Date() %>"></c:set></c:if><c:if test="${post != null}"><c:set var="crateTime" value="${post.createOn}"></c:set></c:if><input οnclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" class="time Wdate" id="createOn" name="s_time" type="text" value="<fmt:formatDate value="${crateTime}" pattern="yyyy-MM-dd HH:mm:ss" />"><textarea class="editor_textarea" id="bodyEditor" name="s_content" placeholder="请在这里输入日志内容"></textarea></div><div class="mod_blog_set"><div id="more-bubble-warp" class="bubble_wrap"></div><div class="publish_bar"><div class="main_op"><input type="hidden" value="" id="imgtalk" name="s_img"><div class="group"><input type="file" id="filename" name="filename" /><input type="button" value="上传" οnclick="upload()"/><br><button id="saveBlogButton" class="publish_button" type="button" οnclick="return talk()">发表</button><button id="btm-save-draft-btn" type="submit">保存草稿</button></div></div></div></div></div></form></div></div></div></div></div><div class="lay_lace_b"></div></div><!-- 版权 --><jsp:include page="footer.jsp"></jsp:include></div></div></body></html>
controller接受数据
package com.hp.controller;import java.io.File;import java.io.IOException;import java.util.HashMap;import java.util.Map;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpSession;import mons.io.FileUtils;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.bind.annotation.ResponseBody;import org.springframework.web.multipart.MultipartFile;import org.springframework.web.servlet.ModelAndView;import com.hp.bean.Say;import com.hp.service.SayService;@Controllerpublic class SayController {@AutowiredSayService sayService;//处理图片@RequestMapping(value="imagertalk",method=RequestMethod.POST)@ResponseBodypublic Map<String, Object> imagertalk(HttpServletRequest request,@RequestParam(value = "filename", required = false)MultipartFile filename) throws IOException{String filename2 = filename.getOriginalFilename();Map<String,Object> resultMap = new HashMap<String, Object>(); if (!filename2.isEmpty()) {// FileUtils 可以做文件流的拷贝 和 操作FileUtils.copyInputStreamToFile(filename.getInputStream(),new File("D:\\workspaces\\QQ\\WebContent\\images\\talk",filename.getOriginalFilename()));//把图片路径保存到用户信息里面resultMap.put("key", filename.getOriginalFilename());return resultMap;}else{resultMap.put("error", 1);return resultMap;}}//发布说说@RequestMapping("talkshuoshuo")public ModelAndView talkshuoshuo(ModelAndView mv,Say say){sayService.InsertInro(say);//跳转主页并查询出个人全部的说说mv.setViewName("/WEB-INF/jsp/post");return mv;}}
实现的效果
看下数据库已经成功完成图片的添加 和说说的添加`
总结
在发布说说的过程中遇到了许多的问题,比如使用ajaxfileupload.js文件进行上传的时候,在浏览器上f12看到已经成功添加了图片但是success : function (data) 这个回调函数总是不会执行, 需要修改下面这一行
还遇到一个难题是:图片能够上传成功,并且已经保存到本地,但是回调函数得到的返回值为null,我的controller已经给他一个json的字符串,浏览器打了断点,显示返回的值为null,而且浏览器报了ajax 406(NotAcceptable) 后来经过查找,有的人说是 由于设置了@ResponseBody,要把对象转换成json格式，缺少转换依赖的jar包，故此错。
解决办法：
加入依赖的jar，jackson-core-asl-1.9.12.jar，jackson-mapper-asl-1.9.12.jar问题解决。后来我下载了jar,发现还报这个错误,让我们的大佬给我看了看 是我的请求参数错了 所以报了406 修改如下
我的jar包 如下 再次记下 以防下次重蹈覆辙
我整理了一下jar包/download/qq_40646143/10355065
修改过的ajaxfileupload.js文件 /download/qq_40646143/10346912
