|
JavaのWebアプリケーション開発フレームワークによる、Webサイト開発の顛末記です。 EclipseのMavenを使った、Spring-MVC、Thymeleaf、MyBatis 等のプログラミングテクニックを、 備忘録的に記録しています。実際に動くソースコードを多用して説明していますので、 これからEclipseや、Spring-MVCを始めたいと思っている人にとって、少しでも参考になれば幸いです。 |
|
Spring-MVCの散歩道 > 応用の森(jQuery/JavaScript 編) > 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 : "./upload_ajax.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); 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"); } else { alert("fileupload Error"); } }).fail(function(resData) { alert("fileupload Error"); }); }); ////// ここまでは、「Ajaxファイルアップロード」をそのまま使用 //////// ////// ajax実行 urlだけ名前を変えています uploadajax.xhtml ⇒ upload_ajax.xhtml//////// ////// ここから下が、ファイルのダウンロード処理を実行するイベントハンドラです ////// /** * droppable 要素内の変更を監視する * GoogleChromではComplete画像が表示されて、ファイル保存ダイアログが開くが * IE/FireFoxなどでは、Complete画像が表示されず（見えないだけで要素はセットされている） * ファイル保存ダイアログが開くので、#droppable 要素内の変更イベントを監視して * 内容が変更されかつ、画像パスがComplete画像だったら、ファイルのダウンロード処理を実行する */ $('#droppable').on('DOMSubtreeModified propertychange', function(e) { //変更された画像パスを取得 var img_name = $("#fup_img").attr("src"); //アップロード完了画像パスなら if(img_name != null && img_name=="./images/fup_complete.jpg") { //ファイルダウンロードサーブレットを実行する location.href = './downloadajax.xhtml'; } }); }); //--> </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> |