ajax异步上传图片webservice转存图片服务器

前端之家收集整理的这篇文章主要介绍了ajax异步上传图片webservice转存图片服务器前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
项目源代码及相关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>-->
  • @H_27_301@三、编写接收文件的Controller
    Java代码
      packagecn.smallbug.core.controller;
    1. importjava.io.IOException;
    2. importjava.util.UUID;
    3. importjavax.servlet.http.HttpServletResponse;
    4. importorg.apache.commons.io.FilenameUtils;
    5. importorg.json.JSONObject;
    6. importorg.springframework.stereotype.Controller;
    7. importorg.springframework.web.bind.annotation.RequestMapping;
    8. importorg.springframework.web.bind.annotation.RequestParam;
    9. importorg.springframework.web.multipart.MultipartFile;
    10. importcom.sun.jersey.api.client.Client;
    11. importcom.sun.jersey.api.client.WebResource;
    12. @Controller
    13. publicclassUploadImage{
    14. @RequestMapping(value="/upload/uploadImage.do")
    15. voiduploadImage(@RequestParam(required=false)MultipartFilepic,HttpServletResponseresponse){
    16. Stringext=FilenameUtils.getExtension(pic.getOriginalFilename());
    17. Stringuuid=UUID.randomUUID().toString();
    18. StringnewFileName=uuid+"."+ext;
    19. //实例化jersey
    20. Clientclient=newClient();//--->
    21. //另一台服务器的请求路径
    22. Stringurl="http://192.168.88.131:8080/back/upload/"+newFileName;
    23. //设置请求路径
    24. WebResourceresource=client.resource(url);
    25. //发送
    26. try{
    27. resource.put(String.class,pic.getBytes());
    28. }catch(IOExceptione){
    29. thrownewRuntimeException(e);
    30. }
    31. //将url格式化成json串
    32. JSONObjectjo=newJSONObject();
    33. jo.put("url",url);
    34. response.setContentType("application/json;charset=UTF-8");
    35. //response.setContentType("text/xml;charset=UTF-8");
    36. //response.setContentType("text/plain;charset=UTF-8");
    37. response.getWriter().write(jo.toString());
    38. }

    四、导入js库,编写jsp 上传文件需要用到jquery.js和到jquery.form.js
    编写表单和图片显示域:

    bodyformid="sentImage"action="${pageContext.request.contextPath}/upload/uploadImage.do"method="post"
  • enctype="multipart/form-data"inputtype="file"onchange="uploadPic()"name="pic"formdivid="20160202852"div当选择图片之后会触发uploadPic()函数,开始上传图片
    functionuploadPic(){
  • //定义参数
  • varoptions={
  • url:"${pageContext.request.contextPath}/upload/uploadImage.do",
  • dataType:"json",250)"> type:"post",0); padding:0px; margin:0px; width:auto; border:0px">//上传成功后回调函数
  • success:function(data){
  • varimg=$("<img/>");
  • img.attr("src",data.url);
  • $("#20160202852").append(img);
  • };
  • //jquery.form使用方式
  • $("#sentImage").ajaxSubmit(options);
  • @H_27_301@五、设置Tomcat,建立图片服务器。 打开${TOMCAT_HOME}/conf文件夹下的web.xml找到下图中相应位置,添加红框中的代码
    因为这个back项目建了一个upload文件夹,所以可以将本项目直接发布到图片服务器上做接收用,如果害怕加载相关jar文件,无端烧内存的话,可以建一个新的web项目,然后在跟目录上建一个upload文件夹,以次来接收图片也可以。我搭建的时候是在虚拟机里另开了一台CentOS作为服务器的,如果要在本机直接运行两个tomcat的话,记得一定要改server.xml中的三个端口。
    六、运行 首先启动两个服务器,然后访问web服务器,选择图片,然后就能看到图片直接在图片显示出来了。并且查看地址,会发现是图片服务器的地址。

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


    转自:http://smallbug-vip.iteye.com/blog/2275574

    猜你在找的Ajax相关文章