質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
ファイル

ファイルとは、文字列に基づいた名前又はパスからアクセスすることができる、任意の情報のブロック又は情報を格納するためのリソースです。

JSP

JSP(Java Server Pages)とは、ウェブアプリケーションの表示レイヤーに使われるサーバーサイドの技術のことです。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

POST

POSTはHTTPプロトコルのリクエストメソッドです。ファイルをアップロードしたときや入力フォームが送信されたときなど、クライアントがデータをサーバに送る際に利用されます。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

0回答

823閲覧

【Ajax→Servletへのファイルの送受信後、ファイルのバイナリ変換の仕方】

stakizawa

総合スコア117

ファイル

ファイルとは、文字列に基づいた名前又はパスからアクセスすることができる、任意の情報のブロック又は情報を格納するためのリソースです。

JSP

JSP(Java Server Pages)とは、ウェブアプリケーションの表示レイヤーに使われるサーバーサイドの技術のことです。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

POST

POSTはHTTPプロトコルのリクエストメソッドです。ファイルをアップロードしたときや入力フォームが送信されたときなど、クライアントがデータをサーバに送る際に利用されます。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2019/12/03 14:41

やりたいこと

JavaServletとAjaxの初学者です。
色々と試したのですが、行き詰まってしまい質問させていただきます。

やりたいこととしては、jspから<form input type="file">でファイルをアップロードします。
そして、選択したファイルをAjaxでServletに投げて、受け取ったファイルをバイナリに変換したいです。

現状

下記に、現状のコードを記載します。

### sample.jsp

jspでは、formでfileをアップロードするようにしています。

jsp

1 <form class="col-xs-1 reference_form" name="reference_file"> 2 <label for="select_file_1" class="btn btn-default btn-block form_label"> 3 参照 4 <input type="file" id="select_file_1" name="reference_btn" accept=".mp3, .wav" style="display: none;"> 5 </label> 6 </form>
### sample.js jsでは、ファイルの変更があれば、functionが発火しjs側でもバイナリ変換を試みました。 変換後のデータをupdate()を呼び出してcommonAjaxに送っています。 commonAjaxにてデータを受け取り、urlで指定したServletにAjaxを投げています。

javascript

1 $("input[name='reference_btn']").change(function() { 2 3 var obj = $(this); 4 5 // ファイルオブジェクトの取得 6 var file = obj.prop("files")[0]; 7 8 // FileObject→binary変換 9 var reader = new FileReader(); 10 reader.onload = function(e){ 11 var allData = e.target.result; //ファイル内容を全て取得 12 bin = ""; 13 for (var i=0; i<allData.length; i++) { 14 var s = allData.charCodeAt(i).toString(16); //16進数で表示 15 bin += s; 16 } 17 } 18 19 reader.readAsBinaryString(file); 20 21 var soundFile = bin; 22 23 update(soundFile); 24 25 }); 26 27 function update(soundFile){ 28 var requestData = {soundFile:soundFile}; 29 var url = sample.java; 30 commonAjax(url, requestData); 31 } 32 33 34 function commonAjax(url, requestData){ 35 36 var ajaxAction = $.ajax({ 37 data : requestData, 38 error: function(xhr, status, errorThrown) { 39 if(isReLoadFlg){ 40 // 画面再描画ボタンが押下されている場合、何もしない 41 return; 42 } 43 44 if (status === 'abort') { 45 return; 46 } 47 if(errFunc != null){ 48 errFunc(xhr, status, errorThrown,etc); 49 }else{ 50 console.log('unexpected error occurred,'); 51 console.log(status); 52 console.log(errorThrown); 53 } 54 }, 55 success : function(data, status, xhr) { 56 if(isReLoadFlg){ 57 // 画面再描画ボタンが押下されている場合、何もしない 58 return; 59 } 60 61 if (data && data.status === 'failure') { 62 console.log('failed to check status,'); 63 console.log(data); 64 } 65 if(callBackFunc != null){ 66 callBackFunc(data, etc); 67 } 68 }, 69 type : post, 70 url : url 71 }); 72 return ajaxAction; 73 }
### sample.java Servletでは、受けとったrequestをいろいろ試して受け取ってみました。 sbに格納するRequestBodyにはjs側で変換したバイナリデータが出力されました。 しかし、この膨大なバイナリデータをgetParameterで取得しようとするとNullになってしまいます。 もう一つ試したことは、js側で変換したバイナリを文字列の配列に格納して Servlet側でもgetParameterValuesで配列として受け取り、それをStringに変換後、byte[]に変換しようと試みました。 この方法でも、Servlet側で受け取った配列はNullとなってしまいます。

java

1 public String sample(HttpServletRequest request, 2 HttpServletResponse response) throws ServletException, IOException,ValidationException{ 3 4 // RequestBodyを取得 5 // RequestBodyの中にはsoundFileのバイナリデータは取得出来ているように見える。 6 StringBuilder sb = new StringBuilder(); 7 BufferedReader reader = request.getReader(); 8 try { 9 String line; 10 while ((line = reader.readLine()) != null) { 11 sb.append(line).append('\n'); 12 } 13 } finally { 14 reader.close(); 15 } 16 17 // これでは、取得はNullになる。 18 String soundFile = request.getParameter("soundFile"); 19 20 log.error("RequestBody:" + sb); 21 22 byte[] soundFile = null; 23 String stSoundFile = ""; 24 25 // 配列での取得にチャレンジ(これもNullになる) 26 try { 27 String[] arraySoundFile = request.getParameterValues("soundFile"); 28 stSoundFile = Arrays.toString(arraySoundFile); 29 log.error("getParameterValues:" + arraySoundFile); 30 log.error("Arrays to String:" + stSoundFile); 31 } catch (Exception e) { 32 log.error("getParameter:失敗"); 33 } 34 35 // 文字列をバイト配列に変換 36 try { 37 soundFile = stSoundFile.getBytes(); 38 } catch(Exception e) { 39 log.debug(e); 40 log.debug("soundFileのバイト変換に失敗"); 41 }

試したこと

上記でも軽く触れましたが、js側で変換したバイナリを配列に格納してServlet側でgetParameterValuesで配列に格納しましたがNullになってしまいます。 また、単純なgetParameterでもNullになってしまいます。

拙い文章で申し訳有りませんが、どなたかご回答いただけると幸いです。
以上、よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問