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

发布时间：2020-12-16 01:43:47 所属栏目：百科来源：网络整理

导读：项目源代码及相关jar包：https://github.com/smallbug-vip/repo/tree/master/code/web/back 一、搭建SpringMVC环境因为现在主要讨论ajax异步上传图片到图片服务器，所以配置SpringMVC环境就简略介绍一下了，更具体步骤可以Google或者直接从链接下载源码。如

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

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

    Xml代码 
    
  
 <?xmlversion="1.0"encoding="UTF-8"?>
<web-appxmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xmlns="http://java.sun.com/xml/ns/javaee"
 xsi:schemaLocation="http://java.sun.com/xml/ns/javaeehttp://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
 id="WebApp_ID"version="2.5">
display-name>back</ 
context-paramparam-name>contextConfigLocationparam-value>classpath:application-context.xml <!--spring的监听器-->
listenerlistener-class>org.springframework.web.context.ContextLoaderListener<!--中文过滤器-->
filterfilter-name>encodingfilter-class>org.springframework.web.filter.CharacterEncodingFilterinit-param>UTF-8filter-mappingurl-pattern>*.do>*.shtml<!--springmvc配置前台-->
servletservlet-name>frontservlet-class>org.springframework.web.servlet.DispatcherServlet>classpath:springmvc-front.xmlservlet-mapping<!--springmvc配置后台-->
>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

context:component-scanbase-package="cn.smallbug"

use-default-filters="false"context:include-filtertype="annotation"

expression="org.springframework.stereotype.Controller"/>

context:component-scan

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

三、编写接收文件的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());
}

四、导入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);

五、设置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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!