MdN - ファイルアップロード

ファイルアップロードサンプル

ドラッグ&ドロップでのファイルアップロード(IE不可)およびサムネイル表示を行うサンプルです。
サーバサイドは未配備なのでアップロード処理は固定画像としています。
本サンプルでは固定レスポンスの為、FineUploaderのプロパティ【demoMode: true】を指定して、
GET通信を行っていますが、実際は同プロパティを設定せずPOST通信で行ってください。
アップロードする



サーバサイドプログラムサンプル(JavaServlet)

/**
 * <p>
 *   ファイルを送信された後のサーバサイド処理です。<br />
 *   このサンプルはApache Commons FileUploadが必要です。
 * </p>
 * 
 * @param request HTTPリクエスト
 * @param response HTTPレスポンス
 */
public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws IOException, ServletException{

    // クロスドメインの場合はアクセス元ドメインを任意に設定
    this.setOrigin(request, response);
    
    // iFrameのリクエストか判定
    boolean isIframe = request.getHeader("X-Requested-With") == null || !request.getHeader("X-Requested-With").equals("XMLHttpRequest");
    String uuid = null;

    // ファイルの保存場所を指定
    String path = this.getClass().getClassLoader().getResource("").getPath().replace("WEB-INF/classes/", "UL/");

    DiskFileItemFactory factory = new DiskFileItemFactory();
    ServletFileUpload upload = new ServletFileUpload(factory);
    try {
        
         Listlist = upload.parseRequest(request);
         Iterator iterator = list.iterator();
         while(iterator.hasNext()){
           FileItem fItem = (FileItem)iterator.next();
           // iFrameのクロスドメイン対応用にuuidを取得
           if ("qquuid".equals(fItem.getFieldName())) {
               uuid = fItem.getString();
           }
           // POSTデータがフォームデータじゃない場合(=ファイル)
           if(!(fItem.isFormField())){
             String fileName = fItem.getName();
             if((fileName != null) && (!fileName.equals(""))){
               fileName=(new File(fileName)).getName();
               fItem.write(new File(path + fileName));
             }
           }
         }
    } catch (Exception e) {
        // 例外処理
    }
       
    if (isIframe) {
      response.setContentType("text/html; charset=UTF-8")
      out.print("{\"success\": true, \"uuid\": \""+ uuid + "\"}");
      // ドメイン名はフルパスで記載する。
      out.print("<script src='http://{ドメイン}/javascripts/iframe.xss.response-3.6.4.js'></script>");	
    } else {
      response.setContentType("application/json; charset=UTF-8");
      out.print("{\"success\": true}");
    }
    out.close();
}

/**
 * <p>
 *   クロスドメイン対策の為、送信元ドメインをすべて許可します<br />
 *   ※ServletFilterに記載しても良い。
 * </p>
 * @param request HTTPリクエスト
 * @param response HTTPレスポンス
 */
private void setOrigin(HttpServletRequest request, HttpServletResponse response) {
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, DELETE, OPTIONS");
    response.setHeader("Access-Control-Allow-Headers", request.getHeader("Access-Control-Request-Headers"));
    response.setHeader("Access-Control-Max-Age", "-1");
}