JavaのWebアプリケーション開発フレームワークによる、Webサイト開発の顛末記です。

EclipseのMavenを使った、Spring-MVC、Thymeleaf、MyBatis 等のプログラミングテクニックを、
備忘録的に記録しています。実際に動くソースコードを多用して説明していますので、
これからEclipseや、Spring-MVCを始めたいと思っている人にとって、少しでも参考になれば幸いです。
Spring-MVCの散歩道 > 応用の森(Java編) > 動画ファイルから静止画を切り出すサンプル 
<!doctype html>

<html lang="ja">
<head>
<title>動画ファイルから静止画を切り出すサンプル</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="./css/myalert.css" />
<link rel="stylesheet" type="text/css" href="./css/mydropzone.css">
<style>
body {
  font-family: "Lato", "SpicaNeueP-Regular", "メイリオ", "ＭＳ Ｐゴシック", sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: #313d42;
  background-color: white;
}
#fileupload{
    border: 1px solid #dddddd;
    width: 40%;
    height: 200px;
}

</style>

<!--[if lt IE 9]>
<script type="text/javascript" src="./js/jquery-1.11.2.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="./js/jquery-2.2.3.js"></script>
<!--<![endif]-->

<script type="text/javascript" src="./js/underscore.js"></script>
<script type="text/javascript" src="./js/dropzone.js"></script>
<script type="text/javascript" src="./js/myutil/mydropzone.js"></script>
<script type="text/javascript" src="./js/myutil/myutil.js"></script>

<script type="text/javascript">
<!--
$(function(){
    $("#id_submit").hide();    //アップロードボタン非表示

    //DropZone Object
    dz = myDropzone({
        selector:"#fileupload",     //dropzone セレクタ
        upload:"#id_upload",        //アップロードボタンセレクタ
        filetype:FileTypes.video,   //アップロード可能ファイルタイプ(mp4/mov)
        maxfilesize:30,              //アップロード可能ファイルサイズ(30MByte)
        maxfiles:1                  //添付ファイル最大数
    });

    // [アップロード] ボタンクリック
    $("#id_upload").click(function(){
        //ドロップゾーンにドロップされたファイルをformDataにセットする
        var formData = new FormData();
        for(i=0 ; i <dz.files.length ;i++ ) {
            //ファイル情報
            formData.append("uploadfile", dz.files[i]);
        }
        //AjaxでFormDataをサーブレットに送信する
        myutil.postFormData("./videoupload.xhtml",formData,
            function(resData, status) {     //callback resData:response
                if(!status) {       //OK
                    $("#result").html(resData);   //切り出した静止画像を描画
                    dz.removeAllFiles(true);        //ドロップエリアの画像をクリアする
                } else {                //NG
                    myutil.showAlert('#div_alert',"障害発生["+resData+"]","150px");
                }
            }, 'html');     //HTMLが返却される
    });

});
//-->
</script>

</head>

<body>
<div id="div_alert">アラート</div>

<!-- ドロップエリア -->
<div class="dropzone" id="fileupload"></div>

<!-- アップロードボタン -->
<div>
    <button id="id_upload" >アップロード</button>
</div>

<!-- アップロード結果画像表示領域 -->
<div id="result"></div>
</body>
</html>