最近在研究struts2檔案上傳，感覺這塊無論是做企業網站還是做系統都用的挺多的，尤其是圖片上傳。但是上傳我們又有幾種方式，一種是表單提交，一種是ajax無重新整理上傳。
這次我要介紹的就是struts2+ajax無重新整理上傳圖片，將圖片儲存在本地，圖片將以路徑的形式儲存在資料庫裡，我們在讀取的時候只需要讀取圖片路徑，系統就會去所在路徑找到對應圖片並顯示。
我們在做圖片上傳時除了基礎的jar包外，還需用到struts2-json-plugin.jar。我用的是2.3.24版的。
本系統前端需要引入ajaxfileupload.js和jquery.min.js兩個js控制元件。
正式流程如下：前端頁面顯示有file控制元件，點選file控制元件，找到上傳圖片，執行onchange事件，通過strtus的json在struts.xml中配置，然後在action中寫入對應uploadfile方法，返回imageString圖片路徑。
關於前臺頁面的處理：
頁面顯示寫法如下，a標籤中class為樣式,input的type為file檔案型別：

<td colspan="2"><a href="javascript:;" class="a-upload">
   <input type="file" name="imgTitle" id="imgTitle"  onchange="uploadFile();"                   accept="image/gif,image/jpeg,image/jpg,image/png">點選這裡上傳檔案</a>
<div id="images"></div></td>

樣式如下：

.input
 
{ border:1px solid #dbdbdb; width:256px; height:25px; line-height:25px;}
.a-upload {
    padding: 4px 10px;
    height: 20px;
    line-height: 20px;
    position: relative;
    cursor: pointer;
    color: #993300;
    background: #fafafa;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden
 
;
    display: inline-block;
    *display: inline;
    *zoom: 1
}
.a-upload  input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer
}
.a-upload:hover {
    color: #444;
    background: #eee;
    border-color: #ccc;
    text-decoration: none
}

點選onchange，執行js如下：

    function uploadFile() {
         if ($("#imgTitle").val().length > 0) {
             ajaxFileUpload();
         }
         else {
             alert("請選擇圖片");
         }
    }
function ajaxFileUpload() {
        var imgName = $("input[name='designProject.imgTitle']").val();
        $.ajaxFileUpload({
                url: 'admin/uploadFile', //用於檔案上傳的伺服器端請求地址
                type: 'post',
                secureuri: false, //一般設定為false
                fileElementId: 'imgTitle', //檔案上傳空間的id屬性  <input type="file" id="file" name="file" />
                dataType: 'JSON', //返回值型別 一般設定為json
                data:{'oldImageString':imgName},
                success: function (imageString, status)  //伺服器成功響應處理函式
                {
                    if(""!=imageString && "0"==imageString.substr(0,1)) {
                        alert(imageString.substr(1,imageString.length-1));
                        return false;
                    }
                    imageString = imageString.replace(/\\/g, '');
                    var aa="<img src="+imageString+" width='150px;' height='150px;' />";
                    aa += "<input type='hidden' value="+imageString+" id='imgTitle' name='designProject.imgTitle' />";
                    $("#images").html(aa);
                },
                error: function (data, status, e)//伺服器響應失敗處理函式
                {
                    alert("error="+e);
                }
            });
        return false;
    }

Struts2寫法如下注意是json格式：

<package name="admin_json" namespace="/admin" extends="json-default">
<action name="uploadFile" class="designAction" method="uploadFile">
        <result type="json">
            <param name="root">imageString</param>
        <param name="contentType">text/html</param>
        </result>
</action>
</package>

Action寫法如下：

private String imageString;
private File imgTitle; 
private String imgTitleFileName; // 檔名稱
private String imgTitleContentType; // 檔案型別
public String uploadFile() {
        try {           ServletActionContext.getRequest().setCharacterEncoding("UTF-8");
            String realpath = this.getClass().getClassLoader().getResource("").getPath();
            realpath = realpath.split("WEB-INF/classes")[0] + "uploadFile/";
            File savedir = new File(realpath);
            if (!savedir.getParentFile().exists())
                savedir.getParentFile().mkdirs();
            String looppath = "uploadFile/";
            Date datenew = new Date();
            SimpleDateFormat simpleDateFormatnew = new SimpleDateFormat("yyyyMMddhhmmss");
            imageString = "";
            if (imgTitle != null) {
                int last = imgTitleFileName.lastIndexOf(".");
                String type = imgTitleFileName.substring(last);
                if (!".jpg".equals(type.toLowerCase()) && !".jpeg".equals(type.toLowerCase())
                        && !".gif".equals(type.toLowerCase()) && !".png".equals(type.toLowerCase())) {
                    imageString = "0上傳圖片格式不正確，只能是jpg，gif，jpeg，png格式";
                    return SUCCESS;
                }
                imgTitleFileName = simpleDateFormatnew.format(datenew) + "_00" + type;
                File savefile = new File(savedir, imgTitleFileName);
                FileUtils.copyFile(imgTitle, savefile);
                imageString = looppath + imgTitleFileName;
            }catch (Exception e) {
            e.printStackTrace();
        }
        return SUCCESS;

Java類中全域性變數需要有對應的get和set方法。最後返回前端的為imageString圖片路徑，該圖片路徑用於儲存至資料庫的路徑。需json傳值至前端，在form表單提交整體資訊的時候提交即可。

created by 李曉晴