Uploadify+Struts 2応用の分析と詳細

7613 ワード
Uploadifyは、Jqueryフレームワークの下で一括ファイルアップロードを処理するプラグインで、複数のサーバ側ソフトウェアをサポートしています.残念なことに、公式サイト(www.uploadify.com)の説明ドキュメントは不完全で、サービス側のデータインタフェースを詳しく説明するのではなく、Js部分の構成を説明することに重点を置いている.また,サーバ側とデータインタラクションを行う部分がswfファイルにカプセル化されているため,ソースコードからの解析も困難である.
1)分析
これに基づいて,Struts 2でのUploadifyのアプリケーションインタフェースデータを探索するために,以下のような小さなツールプログラムRequestObserverを作成した.
package utils;

import java.util.Enumeration;
import java.util.Iterator;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;

import com.opensymphony.xwork2.ognl.OgnlValueStack;


public class RequestObserver {
    private HttpServletRequest request;
   
    public RequestObserver(HttpServletRequest request) {
        this.request = request;
    }
   
    public void observe() {
        String name,pvalue;
        Object avalue;
        Enumeration enum1;

        System.out.println("/***************** Request Observer (Author: Alex Nie)**************/");
       
        // observe Request Header
        enum1 = request.getHeaderNames();
        System.out.println("Request Header:");
        while (enum1.hasMoreElements()) {
            name = (String)enum1.nextElement();
            pvalue = request.getHeader(name);
            System.out.println("  " + name + " ---- " + pvalue);
        }
        enum1 = request.getParameterNames();

        // observe Request Parameters
        System.out.println("Request Parameters:");
        while (enum1.hasMoreElements()) {
            name = (String)enum1.nextElement();
            pvalue = request.getParameter(name);
            System.out.println("  " + name + " ---- " + pvalue);
        }
        enum1 = request.getAttributeNames();

        // observe Request Attributes
        System.out.println("Request Attributes:");
        while (enum1.hasMoreElements()) {
            name = (String)enum1.nextElement();
            avalue = request.getAttribute(name);
            System.out.println("  " + name + " ---- " + avalue);
           
            // observe OgnlValueStack bind by Struts 2
            if (avalue instanceof OgnlValueStack) {
                avalue = (OgnlValueStack)avalue;
                Map<String,Object> m = ((OgnlValueStack) avalue).getContext();
                System.out.println("  >> OgnlValueStack:");
                Iterator it = m.keySet().iterator();
                Object key;
                while (it.hasNext()) {
                    key = it.next();
                    System.out.println ("        " + key + " ---- " + m.get(key));
                }
            }
        }

        // observe Request Session
        HttpSession session = request.getSession(false);
        System.out.println("session: " + session);
        if (session!=null)
        {
            System.out.println("  sessionId: " + session.getId());
            enum1 = session.getAttributeNames();
            System.out.println("Session Attributes:");
            while (enum1.hasMoreElements()) {
                name = (String)enum1.nextElement();
                avalue = session.getAttribute(name);
                System.out.println("  " + name + " ---- " + avalue);
            }
        }
        System.out.println("/***************** End of Request Observer (Author: Alex Nie)**************/");
       
    }
   
}

公式サイトの説明に従って簡単な構成を行った後、ブラウザからファイルのアップロード操作をトリガーし、サーバー側のActionで対応するRequestを受信した後、上記ツールプログラムを利用して分析Requestのデータを出力し、以下のことを発見した.
解析結果
一括ファイルアップロードを行うと、Uploadifyはアップロードファイルごとにサーバ接続を開始します.
接続ごとに、Uploadifyはサーバ側に7つのパラメータを渡し、request parametersを介して4つのStringタイプのパラメータを渡します.
Filename:アップロードするファイルの原名、内容は後述のxxxxFilenNameと同じ
Fileext:アップロードを許可するファイルタイプは、クライアントセグメントJsコードで指定したfileExtパラメータで指定します.
folder:アップロードファイルのサービス期間での保存パスは、顧客セグメントJsコードで指定されたfolderパラメータで指定されます.
Upload:しばらく役に立たない
request attributesで3つのパラメータが渡されました
xxxx:ファイルタイプ、アップロードされたファイル内容、xxxxはクライアントセグメントJsコードで指定されたfileDataNameパラメータで指定されます
xxxxFileName:文字列タイプ、アップロードされたファイルの原名、xxxxはクライアントセグメントJsコードで指定されたfileDataNameパラメータによって指定され、内容は前述のFilenameと同じuploadifyContentType:一時的に役に立たない
以上の7つのパラメータはサーバ側でStruts 2でカプセル化されており,Actionでは直接使用できる.パラメータ名の大文字と小文字は、Js側の大文字と小文字が完全に同じではなく、Js側の大文字と小文字のサーバー側の大文字があり、正反対であることに注意してください.さらに、2つのパラメータの内容は同じであり、これらはUploadifyが将来コードスタイルと約束の面で改善できるところである.
データインタフェースが分かり、Struts 2の下でUploadifyに対応したActionをどのように書くかが明らかになったので、次に写真を一括アップロードする例で説明します.
2)詳細分析
html 
<input id="file_upload" name="photo" type="file"/>

<div id="fileQueue"></div>

Javascript
jquery-1.4.2を導入する.min.js, swfobject.js, jquery.uploadify.v2.1.4.min.js
独自のアップロード用Jsコードを導入すると以下のようになります(簡略説明版):
 $(document).ready(function() {
        $('#file_upload').uploadify({

            //     
            'uploader'       : '/js/uploadify/uploadify.swf', //     flash，          
            'cancelImg'      : '/js/uploadify/cancel.png',//           

            'queueID'        : 'fileQueue', //            Html  Id

            'queueSizeLimit' : 10, //             

 

            //     

            'auto'           : false, //           ,    
            'multi'          : true, //         

 

            //      

            'script'         : 'uploadify.action', //Struts2      action  
            'scriptData'     : {'userid': '12345', 'username': 'Alex Nie'}, //                

 

            //         

            'folder'         : '/upload', //       ，   'folder'        
            'fileDataName'   : 'photo', //                ，       'photo'    'photoFileName'

            'fileExt'        : '*.gid;*.jpg;*.jpeg', //       ，             ，    'fileext'            

 

            //   

            'fileDesc'       : '*.gif;*.jpg;*.jpeg', //                     
            'sizeLimit'      : 100*1024 //          （     ）
        });
      });

 

        function uploadFile(){//    
         jQuery('#file_upload').uploadifyUpload();
        }

Java
ここでは具体的なコードはリストされていません.サーバ側のUploadifyActionプログラムの概要を説明します.
次の変数を定義し、getメソッドとsetメソッドを生成します.
    private File photo;
    private String photoFileName,fileext,folder;

1)「fileext」を分析し、許可されたすべてのファイルタイプを分解する.
2)photoFileNameが許可されているファイルタイプにあるかどうかを確認する
3)ファイルphotoのサイズが基準値を超えているかどうかを確認する(残念ながら、UploadifyはJsで定義されている'sizeLimit'をサーバに渡さず、サーバ側は自分で定義しなければならない)
4)folderが指定したパスが正当かどうかを確認する
5)folderが指定したパスでファイルphotoを保存し、ビジネスのニーズに応じて元のファイル名photoFileNameではなく名前を付けることができます.
6)responseに成功または失敗の返信情報を書き込んで、ページの使用に供する
注意:ブラウザ側のファイルタイプとファイルサイズ制約チェックを信頼している場合は、2、3、4を省略することもできますが、悪意のあるクライアントの偽装を防ぐためには、省略しないほうがいいです.
その他のUploadifyオプション
'removeCompleted':false//アップロードが完了したら、Webページのファイルリストを自動的にクリアするかどうか
'displayData':'percentage',//speedとpercentageの2つの選択があり、1つの表示速度、1つの表示完了率
            'buttonImg'      : '/images/mybutton.jpg'は、ページアップロードボタンの英語文字表示を画像で置き換えることができ、中国語文字に直接置き換えると発生する符号化の問題を避けることができます.
Uploadifyのデフォルトの英語プロンプトウィンドウの問題を解決
jqueryを編集します.uploadify.v2.1.4.min.jsは、「alert」と「confirm」呼び出しを検索し、ヒント情報を英語から中国語に変更します.
jQueryバインドselect連動手動トリガ
JQueryに基づいて編集可能な表の特効を作成