使用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
axios请求成功而$.ajax却不行排错
axios请求成功而$.ajax却不行排错
17 2
|
1月前
|
前端开发
解决前端ajax跨域请求不携带cookie信息JSESSIONID的问题
解决前端ajax跨域请求不携带cookie信息JSESSIONID的问题
|
1月前
|
XML JSON 前端开发
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解(学习总结---从入门到深化)
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解(学习总结---从入门到深化)
63 1
|
4天前
|
Linux 数据库 iOS开发
超级签名源码/超级签/ios分发/签名端本地linux服务器完成签名
该系统完全在linux下运行,不存在使用第三方收费工具,市面上很多系统都是使用的是第三方收费系统,例如:某心签名工具,某测侠等,不开源而且需要每年交费,这种系统只是在这些工具的基础上套了一层壳。请需要系统的放大你们的眼睛。
9 0
|
5天前
|
前端开发 Java Spring
Spring MVC 请求处理流程
Spring MVC 请求处理流程
6 0
|
12天前
|
JSON 前端开发 JavaScript
Django——Ajax请求
Django——Ajax请求
|
1月前
|
JSON 前端开发 JavaScript
Fetch API与Ajax请求
Fetch API是JavaScript的一种新方法,用于网络请求,提供简洁的Promise-based语法和更多功能,如处理头、取消请求及跨域支持,比Ajax更强大。尽管不完全替代Ajax,尤其在老浏览器或需要底层控制时,Fetch API仍是现代浏览器中获取资源的优选工具。例如,以下代码展示了如何使用Fetch API进行GET和POST请求。
|
1月前
|
XML JSON 前端开发
学习Ajax使用异步对象发送请求
Ajax,全称Asynchronous JavaScript and XML(异步JavaScript和XML),是一种用于创建更好、更快以及交互性更强的Web应用程序的技术。
26 3
|
1月前
|
前端开发
AJAX发送请求方法封装和请求函数底层刨析以及axios二次封装
AJAX发送请求方法封装和请求函数底层刨析以及axios二次封装
|
1月前
|
JavaScript 前端开发 Java
jquery ajax+spring mvc上传文件
jquery ajax+spring mvc上传文件