怎样在SSM框架中使用ajax将文件上传至文件服务器(另一个服务器)

.导入jar包

commons-fileupload.jar
commons-io-1.3.2.jar

跨服务器使用的jar

jersey-client-1.18.1.jar
jersey-core-1.18.1.jar

需要使用的js

文件上传页面addUser.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script> <!-- jQuery -->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.form.js"></script> <!-- 文件上传的js文件 -->
</head>
<body>
    <form id="fm" action="${pageContext.request.contextPath}/user/addUser.do" method="post" >
        <p>用户名：<input name="userCode"/></p>
        <p>姓名：<input name="userName"/></p>
        <p>密码：<input name="userPassword" type="password"/></p>
        <p>性别：<input type="radio" name="gender" value="1" />男
        <input type="radio" name="gender" value="2" checked/>女</p>
        <p>
            请上传头像：
            <img id='imgSrc' src='' alt=""  height="100" width="100"/>
            <input type="file" id='imgFile' name='imgFile' onchange="fileShow();"/>
            <input id="relativeSrc" type="hidden" name="filepath"/><!-- 绝对路径提交到数据库 -->
            <br/>
        </p>
        <p><input type="submit" value="添加"/></p>
    </form>
    
    <script type="text/javascript">
        function fileShow(){
            //请求ajax   将图片上传到文件服务器
            $("#fm").ajaxSubmit({
                type:"POST",
                url:"${pageContext.request.contextPath}/upload/uploadImage.do",   //提交至controller处理,将图片保存并实时显示
                data:{
                    fileName:"imgFile"
                },
                success:function(resData){
                    $("#imgSrc").attr("src",resData.fullPath);
                    $("#relativeSrc").val(resData.relativePath);
                },
                dataType:"json"
            });
        }
    </script>    
</body>
</html>

cn.bdqn.controller.UploadController.java

package cn.bdqn.controller;
/**
 * ajax文件上传并实时显示
 */
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
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.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.multipart.commons.CommonsMultipartFile;

import com.sun.jersey.api.client.Client;
import com.sun.jersey.api.client.WebResource;

@Controller
@RequestMapping("/upload")
public class UploadController {
    @RequestMapping("uploadImage")
    //@responseBody把后台pojo转换json对象，返回到页面
    public @ResponseBody Map<String,String> uploadImage(HttpServletRequest request,String fileName){
        MultipartHttpServletRequest mr = (MultipartHttpServletRequest) request;  //将普通请求转换为多部件请求方式
        CommonsMultipartFile mf = (CommonsMultipartFile) mr.getFile(fileName);  //根据文件名进行获取文件对象
        byte[] fileBytes = mf.getBytes();  //将文件对象转换为字节
        /**
         * 获取文件名
         */
        String newFileName = "";
        SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmssSSS"); //获取当前时间作为文件名的前半部分
        newFileName = sdf.format(new Date());
        //取三位数的随机数 作为文件名的后半部分
        Random rd = new Random();
        for(int i=0;i<3;i++){
            newFileName = newFileName + rd.nextInt(10);
        }
        System.out.println("随机的文件名为："+newFileName);
        //获取文件全名称
        String originalFilename = mf.getOriginalFilename();
        System.out.println("文件全名称:"+originalFilename);
        //获取后缀
        String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));
        System.out.println("上传文件的后缀："+suffix);
        /**
         * 开始上传
         */
        Client client = Client.create();  //创建jesy服务器，进行跨服务器上传
        //绝对路径
        String fullPath = "http://127.0.0.1:8001/fileproj/upload/"+newFileName+suffix;
        WebResource wr = client.resource(fullPath);
        //相对路径
        String relativePath = "/upload/"+newFileName+suffix;
        //上传
        wr.put(String.class, fileBytes); //将文件对象的字节码上传
        
        Map<String,String> map = new HashMap<String, String>();
        map.put("fullPath", fullPath); //将绝对路径存入map集合
        map.put("relativePath", relativePath);  //将相对路径存入map集合
        return map;
    }
}

在文件服务器中创建一个文件夹存放本项目需要上传的图片。多项目之前可以使用不同文件夹存放。

将两个服务器打开

 



 

posted @ 2017-08-08 15:01  波光闪烁  阅读(2859)  评论(0)  编辑  收藏  举报