わたしの日記だよ

ー生きる厳しさと哀しさを鮮烈に謳うー

struts+jQuery Form Pluginを使ったファイルアップロード①

jquery struts IE web

会社で急遽、おとなりのプロジェクトのお手伝いをすることになりました。

久しぶりのJava。一番経験の長い言語なので大丈夫でしょ

とタカをくくっていたところ、強烈に洗礼を受けました。。。

 

１．環境

　・Java

　・Struts2

　・Tomcat v7.0 

　基本のところはこんな感じ。あと、PIE_IE678.jsという

　CSSが効かない古いIEに、がんばってCSS適用してくれるjsを使っていました。

 

２．要件

　・ファイル選択ダイアログからファイルを選択する

　・ファイルをアップロードし、同じ画面に表示する

　・ファイル形式はjpegのみで、200KB以内

　・IE8標準対応（！）

 

３．準備

　今回は、form内の一項目として扱うため、jQuery Form Pluginというものを使うことにしました。

　jQuery Form Plugin : jQuery Form Plugin

　↑からダウンロードして、jspファイルで読み込み。

<script src="js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.form.js" type="text/javascript" charset="utf-8"></script>

４．実装

test.jsp（他の項目や装飾は省略しています）。

<s:form>
  <input type="file" name="imgFile" onchange="fileupload(event);" accept="image/jpeg" />
  <div>
    <s:if test="imgFileName != null">
      <img src="<s:property value="imgFileName" />" />
    </s:if>
    <s:else>
      <img src="img/img-no-image.png" />
    </s:else>
  </div>
</s:form>

ファイル選択ダイアログ表示ボタン<input type="file">と

選択した画像ファイル表示用の<img>があるだけです。

<img>は、Action側が持っている値を判定して、値がなければデフォルト用の画像を表示するようにしました。

 

file-upload.js

fileupload = function(event) {
  var $form, target;
  target = event.target ? event.target : event.srcElement;
  $form = $(target).closest('form');

  return $form.ajaxSubmit({
    'target': "body",
    'cache': false,
    'beforeSubmit': function(formData, jqForm, options) {
      // ファイルサイズチェックなどの処理
    },
    'success': function(filename) {
      // アップロード成功時の処理
      alert("success");
    }
  });
};

$form.ajaxSubmit で、formの値をAction側へ送ります。このとき、引数でオプションを指定することができます。

主なオプションは以下。

オプション名役割
beforeSubmitフォーム送信前の処理を指定。
今回は、ファイルサイズ等のチェックがあるので使用。
dataTypeレスポンスのデータ型。xml、script、jsonから指定。省略時はnull
レスポンスをそのまま表示するだけであれば、指定しなくて大丈夫だと思います。
errorエラー時の処理を指定。
success処理を指定。
targetサーバからのレスポンスを出力する箇所。jQueryオブジェクトやDOM要素で指定。
今回は、Action側でページを返していたので「body」を指定。
typeリクエストタイプをGETまたはPOSTで指定。省略時はフォームの指定に従う。
urlフォームデータを送信先のURL。省略時はフォームでの指定に従う。

 

testAction.java

public class TestAction extends ActionSupport implements ServletResponseAware, ServletRequestAware {

  private static final long serialVersionUID = 1L;

  // 画面表示用のファイルパス
  public String imgFileName;
  // アップロードファイル格納用
  public File imgFile;

  public String execute() throws Exception {

    if (imgFile != null) {
      // リクエスト取得
      HttpServletRequest request = (HttpServletRequest)
          ActionContext.getContext().get(org.apache.struts2.StrutsStatics.HTTP_REQUEST);

      // 保存するファイル名（一時保存されたファイルは、形式にかかわらず「.tmp」なので「.jpg」に変更）    
      String fileName = imgFile.getName().replace(".tmp", ".jpg");

      // 保存用のディレクトリ（/test）をチェックして、存在しなければ作成
      File tmpDir = new File(request.getServletContext().getRealPath("/test"));
      if (!tmpDir.exists()) {
        tmpDir.mkdir();
      }

      // ファイルを保存
      BufferedImage img = null;
      boolean result = false;
      File writeFile = new File(request.getServletContext().getRealPath("/test/" + fileName));
      try {
        img = ImageIO.read(imgFile);
        result = ImageIO.write(img, "jpg", writeFile);
      } catch (Exception e) {
        e.printStackTrace();
        result = false;
      }

      // 保存に成功したら、画面表示用のパスをセットする
      if (result) {
        imgFileName = "test/" + fileName;
      }
    }

    return "success";
  }

  ・・・
  
}

フォームデータが送信されると、Action側の同じ名前のプロパティに格納されます。

execute()は、初回表示時などにも呼ばれるため、もしimgFileがセットされていたら

ファイルアップロードが実行されたとみなしています。

 

これでOKとかと思いきや、IEのときだけ1回目のアップロードでexecute()が呼ばれない

問題が起きてしまいました。

1回目：呼ばれない、2回目：呼ばれる、3回目：呼ばれない、4回目：呼ばれる・・・

の繰り返し。

IE8とIE11で確認したので、バージョンは関係ないようです。

これを調べるのが結構大変だったので、次回にまとめようと思います。 

 

struts+jQuery Form Pluginを使ったファイルアップロード②

http://s31o3.hatenablog.com/entry/2015/03/24/154330

Xcode6+swift で storyboadを使わずに実装する

swift iOS Xcode

以前、一度だけObject-CでiOSアプリを作ったことがあるのですが、

久しぶりにやってみたらXcodeの使い方すら

すっかり忘れ去っていたので、最初からお勉強しなおすことにしました。

せっかくなので、swiftにしてみます。

 

今回は、会社でやっていたときと同じく、storyboadは使わず

xibファイルだけ使います。

 

１．プロジェクト作成

　Single View Applicationを作成します。

　↓こちらなどを参考に。

　Xcode6でストーリーボードを使わないで開発する - kzy52's blog

 

２．xibファイルとUIViewControllerを作成する

　xibとcontrollerを別々に作成したら、xibファイルを開いて

f:id:s31o3:20150226154229p:plain

　あとは、controllerのviewDidLoad()で、xibを指定してUIViewのインスタンスを作成し

　controller自身のviewに追加します。

　"xib-name"のところは、作成したxib名に置き換えます。

    let view:UIView = UINib(nibName: "xib-name", bundle: nil).instantiateWithOwner(self, options: nil)[0] as UIView
    self.view.addSubview(view)

　

　controllerから「Also create XIB file」にチェックを入れて、xibも一緒に作成した場合は

　xibの[Connection inspector]-[Outlets]-[view]を削除すれば大丈夫です。

　f:id:s31o3:20150226161240p:plain

 

　

　たったこれだけなのだけど、けっこう時間がかかってしまった。

 

　色々調べていたときに、

　・UIViewControllerを作るときに「Also create XIB file」にチェックを入れれば、自動的に紐付く

　・xibとcontrollerを別々に作ってから、File's Ownerの指定と[Connections Inspector]-[Outlets]-[view]

　を設定すれば紐付く

　とか見かけたのですが、わたしの環境だとうまく行きませんでした。

　

 　エラーにはならないものの、何も表示されない。

　→でも、controllerに上記と同じコードを追加すると

　「Can't add self as subview」エラーが出るので、全然紐付いてないわけじゃないみたいなのに！！

 

　ほんとはもっとスマートな方法があるのかも。