怎樣在SSM框架中使用ajax將文件上傳至文件服務器(另外一個服務器)

時間 2019-11-15

標籤怎樣 ssm 框架使用 ajax 文件上傳文件服務器另外一個服務器欄目 Ajax 简体版

原文原文鏈接

.導入jar包javascript

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

跨服務器使用的jarhtml

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

須要使用的jsjava

文件上傳頁面addUser.jspjquery

<%@ 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.javaweb

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;
    }
}