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

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

<html lang="ja">
<head>
<title>File APIを使用した、Ajaxファイルアップロードサンプル</title>
<meta charset="UTF-8" />

<!--[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">
<!--
$(function(){
        var file_data = null;
        var droppable = $("#droppable");

        //ファイルのアップロードボタンは隠しておきます。
        $("#id_submit").css("visibility","hidden");

        //File API が使用できない場合は諦めます.
        if(!window.FileReader) {
            alert("File API がサポートされていません。");
            return false;
        }

        // イベントをキャンセルするハンドラです.
        var cancelEvent = function(event) {
                event.preventDefault();
                event.stopPropagation();
                return false;
        }

        //dragenter, dragover イベントのデフォルト処理をキャンセルします.
        droppable.bind("dragenter", cancelEvent);
        droppable.bind("dragover", cancelEvent);

        //※１）ファイルドロップ時のイベントハンドラを設定します.
        var handleDroppedFile = function(event) {
            //ファイルは複数ドロップされる可能性がありますが, ここでは 1 つ目のファイルを扱います.
            var file = event.originalEvent.dataTransfer.files[0];
            //※２）後でアップロードボタンで、サーバーに送信するためのファイル情報を覚えておきます。
            file_data = file;
            //dropされたらDROP BOX内を「準備完了」に書き換えます。
            $("#fup_img").attr("src", "./images/fup_drop.jpg");
            $("#fup_img").attr("alt", "送信準備完了");
            $("#fup_img").attr("title", "送信準備完了");

            $("#fup_message").html("<br/>送信ファイル【"+file.name+"】");
            //アップロードボタンを表示化します。
            $("#id_submit").css("visibility","visible");

            // デフォルトの処理をキャンセルします.
            cancelEvent(event);
            return false;
        }

        //Fileドロップ時のイベントハンドラを設定します.
        droppable.bind("drop", handleDroppedFile);

        //Ajaxでファイルをサーバーにアップロードします
        $("#id_submit").click(function() {
            //ファイルがなかったらエラーとする
            if(file_data==null) {
                $("#id_error").text("ファイルが選択されていません！！");
                return;
            }
            //FormData オブジェクトを作成
            var formData = new FormData();
            //※３）FormDataオブジェクトにドロップされたファイル情報を追加します
            formData.append("uploadfile", file_data);
            //必要があれば追加可能ですが、ここでは不要（参考です）
            //formData.append("filename", file_data.name);

            //Ajaxを実行する(jQuery Over 1.8系)
            $.ajax({
                url     : "./uploadajax.xhtml",         //実行するサーブレット
                dataType: "html",                       //サーバから返却されるデータの型(xml, html, json, jsonp, text ...
                type    : "post",                       //post, get
                //※４）FormDataを指定してデータ送信する方法
                data: formData,                         // dataに FormDataを指定
                processData: false,                     //Ajaxがdataを整形しない指定
                contentType: false                      //contentTypeもfalseに指定

            }).done(function(resData) {         //callback resData:response
                //※５）サーバーから返却された情報で、DROP BOX内を書き換えます
                var rsp = $.parseJSON(resData);   //JSON文字列をパースする
                if(rsp.status==0) {
                    $("#fup_img").attr("src", "./images/fup_complete.jpg");
                    $("#fup_img").attr("alt", "FileUpload Complete.");
                    $("#fup_img").attr("title", "FileUpload Complete.");
                    $("#fup_message").html("<br/>ファイルの送信完了");
                    //ファイル情報を初期化します。
                    file_data = null;
                    //アップロードボタンを隠蔽します。
                    $("#id_submit").css("visibility","hidden");
                    //console.log(resData);
                } else {
                    alert("fileupload Error");
                }
            }).fail(function(resData) {
                alert("fileupload Error");
            });
        });
});

//-->
</script>
</head>

<body>
<table>
    <tr>
        <td style="border: gray solid 3px; padding: 2em;">
            <!-- ファイルドロップエリア -->
            <div id="droppable">
                <img id="fup_img" src="./images/fup_empty.jpg" alt="Here, a File, Drop." title="Here, a File, Drop." />
                <span id="fup_message"><br/>アップロードするファイルを、<br/>ここにドロップしてください。</span>
            </div>
        </td>
    </tr>
    <tr>
        <!-- Error 表示エリア -->
        <td style="color:red;"><span  id="id_error"></span></td>
    </tr>
    <tr>
        <td>
            <img style="cursor:pointer;" id="id_submit" src="./images/fileupload_button.png" alt="ファイルをアップロードします" title="ファイルをアップロードします"/>
        </td>
    </tr>
</table>

</body>
</html>