项目源代码及相关jar包:https://github.com/smallbug-vip/repo/tree/master/code/web/back

一、搭建SpringMVC环境 因为现在主要讨论ajax异步上传图片到图片服务器,所以配置SpringMVC环境就简略介绍一下了,更具体步骤可以Google或者直接从链接下载源码。如果不做修改直接运行源码时需要注意,该源码已经链接数据库了,所以在配置文件中需要修改jdbc.properties修改数据库链接参数。否则无法启动。
配置web.xml

Xml代码
  1. <?xmlversion="1.0"encoding="UTF-8"?>
  2. <web-appxmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  3. xmlns="http://java.sun.com/xml/ns/javaee"
  4. xsi:schemaLocation="http://java.sun.com/xml/ns/javaeehttp://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
  5. id="WebApp_ID"version="2.5">
  6. display-name>back</
  7. context-paramparam-name>contextConfigLocationparam-value>classpath:application-context.xml <!--spring的监听器-->
  8. listenerlistener-class>org.springframework.web.context.ContextLoaderListener<!--中文过滤器-->
  9. filterfilter-name>encodingfilter-class>org.springframework.web.filter.CharacterEncodingFilterinit-param>UTF-8filter-mappingurl-pattern>*.do>*.shtml<!--springmvc配置前台-->
  10. servletservlet-name>frontservlet-class>org.springframework.web.servlet.dispatcherServlet>classpath:springmvc-front.xmlservlet-mapping<!--springmvc配置后台-->
  11. >classpath:springmvc-back.xmlwelcome-file-listwelcome-file>index.html>index.htm>index.jspweb-app>

配置pom.xml
文件地址: https://github.com/smallbug-vip/repo/blob/master/code/web/back/pom.xml 配置springmvc-back.xml
<!--springmvc扫包@Controller@Service.....-->
  • context:component-scanbase-package="cn.smallbug"
  • use-default-filters="false"context:include-filtertype="annotation"
  • expression="org.springframework.stereotype.Controller"/>
  • context:component-scan<!--jsp视图-->
  • beanid="jspViewResolver"
  • class="org.springframework.web.servlet.view.InternalResourceViewResolver"propertyname="prefix"value="/"propertyname="suffix"value=".jsp"bean二、配置XML使SpringMVC可以上传图片 在springmvc-back.xml文件中添加:
    <!--文件上传-->
  • beanid="multipartResolver"
  • class="org.springframework.web.multipart.commons.CommonsMultipartResolver"propertyname="defaultEncoding"value="UTF-8">property<!--<propertyname="maxUploadSize"value="2348000"></property>-->
  • 三、编写接收文件的Controller
    Java代码
      packagecn.smallbug.core.controller;
  • importjava.io.IOException;
  • importjava.util.UUID;
  • importjavax.servlet.http.HttpServletResponse;
  • importorg.apache.commons.io.FilenameUtils;
  • importorg.json.JSONObject;
  • importorg.springframework.stereotype.Controller;
  • importorg.springframework.web.bind.annotation.RequestMapping;
  • importorg.springframework.web.bind.annotation.RequestParam;
  • importorg.springframework.web.multipart.multipartfile;
  • importcom.sun.jersey.api.client.Client;
  • importcom.sun.jersey.api.client.WebResource;
  • @Controller
  • publicclassUploadImage{
  • @RequestMapping(value="/upload/uploadImage.do")
  • voiduploadImage(@RequestParam(required=false)multipartfilepic,HttpServletResponseresponse){
  • Stringext=FilenameUtils.getExtension(pic.getoriginalFilename());
  • Stringuuid=UUID.randomUUID().toString();
  • StringnewFileName=uuid+"."+ext;
  • //实例化jersey
  • Clientclient=newClient();//--->
  • //另一台服务器的请求路径
  • Stringurl="http://192.168.88.131:8080/back/upload/"+newFileName;
  • //设置请求路径
  • WebResourceresource=client.resource(url);
  • //发送
  • try{
  • resource.put(String.class,pic.getBytes());
  • }catch(IOExceptione){
  • thrownewRuntimeException(e);
  • }
  • //将url格式化成json串
  • JSONObjectjo=newJSONObject();
  • jo.put("url",url);
  • response.setContentType("application/json;charset=UTF-8");
  • //response.setContentType("text/xml;charset=UTF-8");
  • //response.setContentType("text/plain;charset=UTF-8");
  • response.getWriter().write(jo.toString());
  • }
  • ajax异步上传图片webservice转存图片服务器的更多相关文章

    1. html5利用canvas实现颜色容差抠图功能

      这篇文章主要介绍了html5利用canvas实现颜色容差抠图功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

    2. Canvas图片分割效果的实现

      这篇文章主要介绍了Canvas图片分割效果的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    3. HTML5 Canvas实现放大镜效果示例

      这篇文章主要介绍了HTML5 Canvas实现放大镜效果示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    4. Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)

      这篇文章主要介绍了Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式),本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

    5. html5如何在Canvas中实现自定义路径动画示例

      本篇文章主要介绍了html5如何在Canvas中实现自定义路径动画示例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    6. 基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能

      这篇文章主要介绍了基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能,需要的朋友可以参考下

    7. canvas实现圆形进度条动画的示例代码

      这篇文章主要介绍了canvas实现圆形进度条动画的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    8. 教你使用Canvas处理图片的方法

      本篇文章主要介绍了教你使用Canvas处理图片的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    9. 手把手教你实现一个canvas智绘画板的方法

      这篇文章主要介绍了手把手教你实现一个canvas智绘画板的方法的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    10. 使用canvas来完成线性渐变和径向渐变的功能的方法示例

      这篇文章主要介绍了使用canvas来完成线性渐变和径向渐变的功能的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    随机推荐

    1. xe-ajax-mock 前端虚拟服务

      最新版本见Github,点击查看历史版本基于XEAjax扩展的Mock虚拟服务插件;对于前后端分离的开发模式,ajax+mock使前端不再依赖后端接口开发效率更高。CDN使用script方式安装,XEAjaxMock会定义为全局变量生产环境请使用xe-ajax-mock.min.js,更小的压缩版本,可以带来更快的速度体验。

    2. vue 使用 xe-ajax

      安装完成后自动挂载在vue实例this.$ajaxCDN安装使用script方式安装,VXEAjax会定义为全局变量生产环境请使用vxe-ajax.min.js,更小的压缩版本,可以带来更快的速度体验。cdnjs获取最新版本点击浏览已发布的所有npm包源码unpkg获取最新版本点击浏览已发布的所有npm包源码AMD安装require.js安装示例ES6Module安装通过Vue.use()来全局安装示例./Home.vue

    3. AJAX POST数据中文乱码解决

      前端使用encodeURI进行编码后台java.net.URLDecoder进行解码编解码工具

    4. Koa2框架利用CORS完成跨域ajax请求

      实现跨域ajax请求的方式有很多,其中一个是利用CORS,而这个方法关键是在服务器端进行配置。本文仅对能够完成正常跨域ajax响应的,最基本的配置进行说明。这样OPTIONS请求就能够通过了。至此为止,相当于仅仅完成了预检,还没发送真正的请求呢。

    5. form提交时,ajax上传文件并更新到&lt;input&gt;中的value字段

    6. ajax的cache作用

      filePath="+escape;},error:{alert;}});解决方案:1.加cache:false2.url加随机数正常代码:网上高人解读:cache的作用就是第一次请求完毕之后,如果再次去请求,可以直接从缓存里面读取而不是再到服务器端读取。

    7. 浅谈ajax上传文件属性contentType = false

      默认值为contentType="application/x-www-form-urlencoded".在默认情况下,内容编码类型满足大多数情况。在这里,我们主要谈谈contentType=false.在使用ajax上传文件时:在其中先封装了一个formData对象,然后使用post方法将文件传给服务器。说到这,我们发现在JQueryajax()方法中我们使contentType=false,这不是冲突了吗?这就是因为当我们在form标签中设置了enctype=“multipart/form-data”,

    8. 909422229_ajaxFileUpload上传文件

      ajaxFileUpload.js很多同名的,因为做出来一个很容易。我上github搜AjaxFileUpload出来很多类似js。ajaxFileUpload是一个异步上传文件的jQuery插件传一个不知道什么版本的上来,以后不用到处找了。语法:$.ajaxFileUploadoptions参数说明:1、url上传处理程序地址。2,fileElementId需要上传的文件域的ID,即的ID。3,secureuri是否启用安全提交,默认为false。4,dataType服务器返回的数据类型。6,error

    9. AJAX-Cache:一款好用的Ajax缓存插件

      原文链接AJAX-Cache是什么Ajax是前端开发必不可少的数据获取手段,在频繁的异步请求业务中,我们往往需要利用“缓存”提升界面响应速度,减少网络资源占用。AJAX-Cache是一款jQuery缓存插件,可以为$.ajax()方法扩展缓存功能。

    10. jsf – Ajax update/render在已渲染属性的组件上不起作用

      我试图ajax更新一个有条件渲染的组件。我可以确保#{user}实际上是可用的。这是怎么引起的,我该如何解决呢?必须始终在ajax可以重新呈现之前呈现组件。Ajax正在使用JavaScriptdocument.getElementById()来查找需要更新的组件。但是如果JSF没有将组件放在第一位,那么JavaScript找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。

    返回
    顶部