使用SpringMvc跨服务器上传图片,Ajax异步刷新图片框显示图片功能请求不到后台,onChange事件没有激活的源码?

简介: 使用SpringMvc跨服务器上传图片,Ajax异步刷新图片框显示图片功能请求不到后台,onChange事件没有激活的源码?

使用SpringMvc跨服务器上传图片,Ajax异步刷新图片框显示图片功能请求不到后台,onChange事件没有激活的源码?


beans.xml


<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc"
  xmlns:context="http://www.springframework.org/schema/context"
  xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx"
  xsi:schemaLocation="http://www.springframework.org/schema/beans 
    http://www.springframework.org/schema/beans/spring-beans-3.2.xsd 
    http://www.springframework.org/schema/mvc 
    http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd 
    http://www.springframework.org/schema/context 
    http://www.springframework.org/schema/context/spring-context-3.2.xsd 
    http://www.springframework.org/schema/aop 
    http://www.springframework.org/schema/aop/spring-aop-3.2.xsd 
    http://www.springframework.org/schema/tx 
    http://www.springframework.org/schema/tx/spring-tx-3.2.xsd">
    <context:component-scan base-package="com"></context:component-scan>
  <!-- 第一步:配置数据源 -->
  <context:property-placeholder location="classpath:jdbc.properties" />
  <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
    <property name="jdbcUrl" value="${jdbc.url}"></property>
    <property name="driverClass" value="${jdbc.driver}"></property>
    <property name="user" value="${jdbc.username}"></property>
    <property name="password" value="${jdbc.password}"></property>
  </bean>
  <!-- 第二步:创建sqlSessionFactory。生产sqlSession -->
  <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
  <property name="dataSource" ref="dataSource"></property>
  <property name="configLocation" value="classpath:sqlMapConfig.xml"></property>
  </bean>
  <!-- 配置mybatis接口代理开发
    * 接口类名和映射文件必须同名
    * 接口类和映射文件必须在同一个目录 下
    * 映射文件namespace名字必须是接口的全类路径名
    * 接口的方法名必须和映射Statement的id一致
   -->
   <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
   <property name="basePackage" value="
   com


.dao"></property>


   <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"></property>
   </bean>
  <!-- 第三步:事务 -->
  <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
  <property name="dataSource" ref="dataSource"></property>
  </bean>
  <!-- 配置通知 -->
  <tx:advice id="txAdvice" transaction-manager="transactionManager">
  <tx:attributes>
  <tx:method name="save*" propagation="REQUIRED" />
  <tx:method name="update*" propagation="REQUIRED" />
  <tx:method name="delete*" propagation="REQUIRED" />
  <tx:method name="insert*" propagation="REQUIRED" />
  <tx:method name="*" propagation="REQUIRED" /> 
  </tx:attributes>
  </tx:advice>
  <!-- 配置拦截service -->
  <aop:config>
  <aop:advisor advice-ref="txAdvice" pointcut="execution(* com.service.*.*(..))"/>
  </aop:config>
</beans>


springmvc.xml


<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc"
  xmlns:context="http://www.springframework.org/schema/context"
  xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx"
  xsi:schemaLocation="http://www.springframework.org/schema/beans 
    http://www.springframework.org/schema/beans/spring-beans-3.2.xsd 
    http://www.springframework.org/schema/mvc 
    http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd 
    http://www.springframework.org/schema/context 
    http://www.springframework.org/schema/context/spring-context-3.2.xsd 
    http://www.springframework.org/schema/aop 
    http://www.springframework.org/schema/aop/spring-aop-3.2.xsd 
    http://www.springframework.org/schema/tx 
    http://www.springframework.org/schema/tx/spring-tx-3.2.xsd">
  <context:component-scan base-package="com"></context:component-scan>
  <!-- annotation-driven:默认创建了多个对象:RequestMappingHandlerMapping,RequestMappingHandlerAdapter
    也就提供对json格式支持
   -->
  <mvc:annotation-driven/>
  <!-- 配置sprigmvc视图解析器:解析逻辑试图 后台返回逻辑试图:index 视图解析器解析出真正物理视图:前缀+逻辑试图+后缀====/WEB-INF/jsps/index.jsp -->
  <bean
    class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    <property name="prefix" value="/WEB-INF/jsps/"></property>
    <property name="suffix" value=".jsp"></property>
  </bean>
  <!-- 文件上传解析器 -->
  <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
  <property name="maxUploadSize" value="10240000"></property>
  </bean>
</beans>


sqlMapConfig.xml


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE configuration
PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
</configuration>


editItem.jsp

itemsList.jsp


<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt"  prefix="fmt"%>
<c:set var="picPath" value="http://127.0.0.1:8003/ssmImage19"></c:set>
<!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>查询商品列表</title>
</head>
<body> 
<form action="${pageContext.request.contextPath }/items/deleteByIds.do" method="post">
查询条件:
<table width="100%" border=1>
<tr>
<td><input type="submit" value="查询"/></td>
<td><input type="submit" value="批量删除"/></td>
</tr>
</table>
商品列表:
<table width="100%" border=1>
<tr>
  <td>ID</td>
  <td>商品名称</td>
  <td>商品图片</td>
  <td>商品价格</td>
  <td>生产日期</td>
  <td>商品描述</td>
  <td>操作</td>
</tr>
<c:forEach items="${itemsList }" var="item">
<tr>
  <td>
  <input type="checkbox" name="id" value="${item.id }">
  </td>
  <td>${item.name }</td>


<strong><span style="color:#ff0000">
</span></strong>


<strong><span style="color:#ff0000">
</span></strong>


<strong><span style="color:#ff0000">utils.java</span></strong>


package com.utils; public class Commons { public static final String PIC_HOST="http://127.0.0.1:8003/ssmImage19"; } 


<td><img id='imgSize1ImgSrc' src='${picPath }${item.pic }' height="100" width="100" /></td><td>${item.price }</td><td><fmt:formatDate value="${item.createtime}" pattern="yyyy-MM-dd HH:mm:ss"/></td><td>${item.detail }</td><td><a href="${pageContext.request.contextPath }/items/edit.do?id=${item.id}">修改</a><a href="${pageContext.request.contextPath }/items/deleteByID.do?id=${item.id}">删除</a></td></tr></c:forEach></table></form></body></html>


UploadController.java


package com.controller;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Random;
import javax.servlet.http.HttpServletRequest;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.multipart.commons.CommonsMultipartFile;
import com.utils.Commons;
import com.sun.jersey.api.client.Client;
import com.sun.jersey.api.client.WebResource;
@Controller
@RequestMapping("/upload")
public class UploadController {
  @RequestMapping("uploadPic")
  public void uploadPic(HttpServletRequest request,String fileName,PrintWriter out){
    //把Request强转成多部件请求对象
    MultipartHttpServletRequest mh = (MultipartHttpServletRequest) request;
    //根据文件名称获取文件对象
    CommonsMultipartFile cm = (CommonsMultipartFile) mh.getFile(fileName);
    //获取文件上传流
    byte[] fbytes = cm.getBytes();
    //文件名称在服务器有可能重复?
    String newFileName="";
    SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmssSSS");
    newFileName = sdf.format(new Date());
    Random r = new Random();
    for(int i =0 ;i<3;i++){
      newFileName=newFileName+r.nextInt(10);
    }
    //获取文件扩展名
    String originalFilename = cm.getOriginalFilename();
    String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));
    //创建jesy服务器,进行跨服务器上传
    Client client = Client.create();
    //把文件关联到远程服务器
    WebResource resource = client.resource(Commons.PIC_HOST+"/upload/"+newFileName+suffix);
    //上传
    resource.put(String.class, fbytes);
    //ajax回调函数需要会写写什么东西?
    //图片需要回显:需要图片完整路径
    //数据库保存图片的相对路径.
    String fullPath = Commons.PIC_HOST+"/upload/"+newFileName+suffix;
    String relativePath="/upload/"+newFileName+suffix;
    //{"":"","":""}
    String result="{\"fullPath\":\""+fullPath+"\",\"relativePath\":\""+relativePath+"\"}";
    out.print(result);
  }
}


http://127.0.0.1:8003/ssmImage19此项目为图片上传成功的存放目录(WebRoot/upload),所以什么都没有,只是一个动态Web Project



目录
相关文章
|
1月前
|
JSON JavaScript 前端开发
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
57 22
|
1月前
|
前端开发 JavaScript Java
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
60 4
|
1月前
|
网络协议 Unix Linux
一个.NET开源、快速、低延迟的异步套接字服务器和客户端库
一个.NET开源、快速、低延迟的异步套接字服务器和客户端库
|
3月前
|
前端开发 JavaScript Java
Ajax进行异步交互:提升Java Web应用的用户体验
Ajax 技术允许在不重载整个页面的情况下与服务器异步交换数据,通过局部更新页面内容,极大提升了 Java Web 应用的响应速度和用户体验。本文介绍 Ajax 的基本原理及其实现方式,包括使用 XMLHttpRequest 对象发送请求、处理响应数据,并在 Java Web 应用中集成 Ajax。此外,还探讨了 Ajax 如何通过减少页面刷新、实时数据更新等功能改善用户体验。
73 3
|
5月前
|
Java 数据库连接 容器
SpringMVC(四)【SSM 整合、统一结果封装、异常处理、前后台协议联调】(1)
SpringMVC(四)【SSM 整合、统一结果封装、异常处理、前后台协议联调】
|
5月前
|
监控 前端开发 JavaScript
JS Navigator.sendBeacon 可靠的、异步地向服务器发送数据
Navigator.sendBeacon 是一个用于发送少量数据到服务器的 API,尤其适用于在页面即将卸载时发送数据,如日志记录、用户行为分析等。 与传统的 AJAX 请求不同,sendBeacon 方法的设计目标是确保数据在页面卸载(例如用户关闭标签页或导航到新页面)时能够可靠地发送。 Navigator.sendBeacon 方法可用于通过 HTTP POST 将少量数据异步传输到 Web 服务器。 它主要用于将统计数据发送到 Web 服务器,同时避免了用传统技术(如:XMLHttpRequest)发送分析数据的一些问题。
124 1
|
5月前
|
XML 移动开发 前端开发
JS设置Ajax为同步或异步
JS设置Ajax为同步或异步
69 0
|
5月前
|
前端开发
SpringMVC(四)【SSM 整合、统一结果封装、异常处理、前后台协议联调】(3)
SpringMVC(四)【SSM 整合、统一结果封装、异常处理、前后台协议联调】
|
5月前
|
JSON 前端开发 程序员
SpringMVC(四)【SSM 整合、统一结果封装、异常处理、前后台协议联调】(2)
SpringMVC(四)【SSM 整合、统一结果封装、异常处理、前后台协议联调】
|
5月前
1.ajax同步和异步区别 2.post和get区别
1.ajax同步和异步区别 2.post和get区别
31 0
下一篇
无影云桌面