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

其他 2018-05-14 18:33:00 阅读次数: 2


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;
	}
	
}



实现的效果 


扫描二维码关注公众号，回复： 836083 查看本文章



看下数据库已经成功完成图片的添加 和说说的添加`



    总结

在发布说说的过程中遇到了许多的问题,比如使用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

猜你喜欢

转载自blog.csdn.net/qq_40646143/article/details/79975337
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022