提交from表单并使用ajax上传发布说说的图片

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_40646143/article/details/79975337


jsp页面


<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.Date"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%> 
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/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() {
	 //获取用户id
            var filename = document.getElementById("filename").value;
            if ($.trim(filename) == "") { alert("请选择要上传的文件"); return; }
	       console.log("test"); 

            var result_msg = "";
            $.ajaxFileUpload({
                url: 'imagertalk',  //这里是服务器处理的代码
                type: 'post',
                secureuri: false, //一般设置为false
                fileElementId: 'filename', // 上传文件的id、name属性名
                dataType: 'json', //返回值类型,一般设置为json、application/json
                data: {  
                	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 onclick="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="上传" onclick="upload()"/><br>
													
															<button id="saveBlogButton" class="publish_button" type="button" onclick="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 org.apache.commons.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;

@Controller
public class SayController {
	@Autowired
	SayService sayService;
	
	
	//处理图片
	@RequestMapping(value="imagertalk",method=RequestMethod.POST)
	@ResponseBody
	public 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(Not Acceptable)  后来经过查找,有的人说是  由于设置了@ResponseBody,要把对象转换成json格式,缺少转换依赖的jar包,故此错。 
解决办法: 

   加入依赖的jar,jackson-core-asl-1.9.12.jar,jackson-mapper-asl-1.9.12.jar问题解决。后来我下载了jar,发现还报这个错误,让我们的大佬给我看了看 是我的请求参数错了 所以报了406 修改如下




我的jar包 如下  再次记下  以防下次重蹈覆辙


                                    


我整理了一下jar包  https://download.csdn.net/download/qq_40646143/10355065

修改过的ajaxfileupload.js文件   https://download.csdn.net/download/qq_40646143/10346912

阅读更多

扫码向博主提问

北岛荒丶南城NULL

非学,无以致疑;非问,无以广识
  • 擅长领域:
  • javaWeb
去开通我的Chat快问
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页