maven+myeclise+springmvc+jersey+ajax实现图片跨服务器上传

2016-12-08 12:06:26来源:CSDN作者:ilovepengqi人点击

第七城市

1,在maven中配置tomcat插件

   

          <plugins>
<plugin>
<groupId>org.apache.tomcat.maven</groupId>
<artifactId>tomcat7-maven-plugin</artifactId>
<configuration>
<port>8098</port> 
<path>/</path> 
                             </configuration>
</plugin>

</plugins>


2,在maven中配置上传文件需要的依赖

<!-- 文件上传 -->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.2.2</version>
</dependency>


3,配置Jersey依赖

<!-- jersey -->
<dependency>
<groupId>com.sun.jersey</groupId>
<artifactId>jersey-server</artifactId>
<version>1.10</version>
</dependency>
<dependency>
<groupId>com.sun.jersey</groupId>
<artifactId>jersey-client</artifactId>
<version>1.10</version>
</dependency>
<dependency>
<groupId>com.sun.jersey</groupId>
<artifactId>jersey-core</artifactId>
<version>1.10</version>
</dependency>


4,页面编写

 <input type='file' id='imgSize1File' name='imgSize1File' 
class="file" onchange="submitImgSize1Upload()" />
<span class="pos" id="imgSize1FileSpan">请上传图片的大小不超过3MB</span>
    <input type='hidden' id='imgSize1' name='picture' value='' reg="^.+$" tip="亲!您忘记上传图片了。" />

<img id="imgSize1ImgSrc" src="${picPath }${item.pic }"  width="180" height="180" />

ajax:<script type="text/javascript">
function submitImgSize1Upload(){
  
   var option={
type:"POST",
url:"/upload/uploadPic",
dataType:"text",
data:{
    
fileName : "imgSize1File"
},

success:function(data){
//把json格式的字符串转换成json对象
var jsonObj = $.parseJSON(data);

//返回服务器图片路径,把图片路径设置给img标签
$("#imgSize1ImgSrc").attr("src",jsonObj.fullPath);
//数据库保存相对路径
$("#imgSize1").val(jsonObj.relativePath);
}

};

$("#personRegForm").ajaxSubmit(option);
}

</script>


5,后台

@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);


}


6,最后在springmvc配置文件中开启上传  

<!-- 配置文件上传解析器 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
   <property name="maxUploadSize" value="1024000"></property>
</bean>


7,配置另外一台服务器  并进行相应设置


public class Commons {

public static final String PIC_HOST="http://127.0.0.1:8099";


}


8,在tomcat的web.xml中的105行配置

 <init-param>
            <param-name>listings</param-name>
            <param-value>false</param-value>
        </init-param>


完事    成功实现图片的上传与及时回显



第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台