2017-12-21 21 views
2

として、私は、ファイルから画像を選択し、読むために次のコードを使用しています:JSP、JavaScriptを:表示バイトが[]の画像

<div class="col-md-6 form-group"> 
<input type='file' name="image" onchange="readURL(this);" 
        class="form-control" /> 
<img id="userimg" src="#" alt="" /> 
</div> 

の.js:私は変換私のサーブレットで

function readURL(input) { 
    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 

     reader.onload = function (e) { 
      $('#userimg') 
       .attr('src', e.target.result) 
       .width(150) 
       .height(200); 
     }; 

     reader.readAsDataURL(input.files[0]); 
    } 
} 

をファイルをbyte[]

(request.getParameter("image")).getBytes() 

に挿入してデータベースに挿入します。

その後、私はこのように、の.jspページ内のデータベースおよびディスプレイからそれを読み取ろう:

.jspという

<div class="panel panel-success"> 
         <h2>Pictures</h2> 
         <% 
          List<byte[]> pics = PictureTable.getConcertPictures(concertBean.getId()); 
         %> 
         <% 
          for (byte[] p : pics) { 
           String encoded = ImageHelper.encodeImage(p); 
         %> 
         <img src="data:image/jpg;base64,<%=encoded%>"> 
         <% 
          } 
         %> 
    </div> 

ImageHelper.java:

public static String encodeImage(byte[] img) { 
     return Base64.encode(img); 
    } 

が、イメージは正しく表示されません(何かがデータベースに挿入されます)。

編集:

私は自分のコードを変更しました:

が.jsp:

<div class="comments"> 
       <div class="panel panel-success"> 
        <h2>Pictures</h2> 
        <% 
         List<byte[]> pics = PictureTable.getConcertPictures(concertBean.getId()); 
        %> 
        <% 
         for (byte[] p : pics) { 
          String encoded = ImageHelper.encodeImage(p); 
        %> 
        <img src="data:image/jpg;base64,<%=encoded%>"> 
        <% 
         } 
        %> 
       </div> 
       <!-- /container --> 
       <form 
        action="GalleryController?action=add_concert_picture&concertID=<%=concertBean.getId()%>" 
        method="post" class="panel panel-success" 
        enctype="multipart/form-data"> 
        <div class="col-md-6 form-group"> 
         <input type='file' name="image" class="form-control" /> 
        </div> 
        <button type="submit" class="btn">Submit</button> 
       </form> 
      </div> 

サーブレット:

Part filePart = request.getPart("image"); 
InputStream fileContent = filePart.getInputStream(); 
PictureTable.insertConcertPicture(cid, user.getUser().getId(), fileContent); 

PictureTable.java:

public static void insertConcertPicture(int concertId, int userId, InputStream photo) { 
     try (Connection connection = ConnectionPool.getConnectionPool().checkOut()) { 

      PreparedStatement ps = connection 
        .prepareStatement("INSERT INTO concertphototable(ConcertId, UserId, Photo) VALUES(?,?,?)"); 

      ... 
      ps.setBinaryStream(3, photo); 

      ps.executeUpdate(); 

     } catch (Exception e) { 
      e.printStackTrace(); 
     } 
    } 

イメージはまだ正しく表示されませんが、ページの「送信」部分は表示されません。

+2

Base64エンコーディングのないレスポンスに直接バイトを書き込んで、そのサーブレットに 'img'タグのURLを直接指さないのはなぜですか? – tsolakp

+0

'Base64.getEncoder()。encode(img)'を使用するとどうなりますか?また、画像がJPEGであることを確認しましたか? – pyb

+1

@pyb確かにJPG。私はチェックしました - エンコードされているのは画像の名前です。私はちょうど 'encode(img)'が返されたものをデコードし、私のファイルの名前を得ました。 – Eutherpy

答えて

3

これを実行する方法は多数あります。私はbase64 Stringを返すことでデータベースに格納します。その後、それをJSPに戻してレンダリングすることができます。あなたの/アップロードコントローラで

<input type="file" name="file" onchange="encodeImageFileAsURL(this)" /> 
<form method="POST" action="/upload"> 
    <input id="image" type="text" name="image" value="asdf" /><br /> 
    <br /> <input type="submit" value="Submit" /> 
</form> 
<script type="text/javascript"> 
    function encodeImageFileAsURL(element) { 
     var file = element.files[0]; 
     var reader = new FileReader(); 
     reader.onloadend = function() { 
      document.getElementById("image").value = reader.result; 
     } 
     reader.readAsDataURL(file); 
    } 
</script> 

を::

@PostMapping("/upload") 
public ModelAndView singleFileUpload(@RequestParam("image") String image, RedirectAttributes redir) { 
    jdbcTemplate.update("INSERT INTO concertphototable(ConcertId, UserId, Photo) VALUES(?, ?, ?)", 1, 1, image); 
    String imageString = jdbcTemplate.queryForObject("Select Photo from concertphototable where ConcertId = " + 1, 
      String.class); 
    ModelAndView modelAndView = new ModelAndView(); 
    modelAndView.setViewName("redirect:uploadStatus"); 
    redir.addFlashAttribute("image", imageString); 
    return modelAndView; 
} 

そしてuploadStatusのページへ:

<img src=${image}> 

が混乱しないでください、あなたがする必要がこれを行うには

Springパートのjspからサーバーにbase64 Stringをポストして保存する必要があることを覚えておいてください。次に、文字列として取得し、イメージsrcタグのjspに渡すと、イメージが表示されます。画像をデータベースに保存する特別な理由がない場合は、上記の方法で行ってください。

1

あなたの問題のいくつかは技術的であり、いくつかは方法論に関連していると思います。私の反応は主に方法論に焦点を当てています。

JavaScriptクライアントとC#Web APIサーバーで同様のことを行いました。私たちは非常に簡単な開発/検証モデルを採用しました。これにより、データが変換される各ポイントでエラーを素早く見つけ出し分離することができました。

私たちは最初、あなたが経験しているような同じ問題の多くを苦労しました。私たちがどのように問題を解決したかは、あなたにとっては援助の可能性があります。

ユーザーtsolakpが良い点を示しました。バイトデータを直接返すことを検討する必要があります。あなたがクライアントからサーバーにバイナリを行くつもりなら、あなたは真剣にダウンロードデータのためにそれを考慮することをお勧めします。私たちは、ほとんどのデータに対してバイナリアップロード/ダウンロードを使用しています。私はこれが流行っていないことは分かっていますが、私たちのシステムではもっと効率的です。

あなたがいることを述べた:

SRC = "データ:画像/ JPG; base64で、/ 9J/4AAQSkZJRgABAQEAAAAAAAD/4Zf2RXhpZgAATU0AKgAAAAg ...この がveeeeeeery長いために行く

であること。人間が簡単に読み書きできる非常に小さなJPEGを作成し、それを使ってアップロードとダウンロードのフローを段階的に検証することをお勧めします。

次のコードフローを使用しました。 javascriptクライアントはバイナリデータをアップロードします。

var byte[] = atob(jpeg string); 
 
var xhr = new XMLHttpRequest(); 
 
xhr.open... 
 
xhr.onload... 
 
xhr.setRequestHeader("Content-type", "application/octet-stream"); 
 
xhr.send(new Uint8Array(byte[]));

が容易データフローの各ステップで確認したように、我々は非常に小さいJPEG(例えば、5x10px)を使用します。

  1. jpeg文字列をバイト[]に変換して文字列に変換し、すべてが正しく機能していることを確認してください。

  2. 上記のHTTPコードで示したように、JavaScriptバイト[]をUint8Array(byte [])に変換してサーバーに送信する必要がありました。サーバーに送信する前に、byte []に​​変換してからjpeg文字列形式に戻して、この時点までの全体の流れを確認しました。我々は、これらの小さな部分への流れを壊すことによって識別しやすい2つの問題を発見した。

  3. これまでのところ、クライアントとサーバー間の通信を追加しました。サーバに到着すると、サーバ上のバイナリデータがステップ2で抽出されたクライアントデータと一致していることが確認されました。

  4. サーバにデータを保存する前に、アップロードしたデータをクライアントに戻して、それは各点で同じであり、適切に解読することができた。ここでは、いくつかの問題を発見し、メディアコンバータの必要性を特定しました(あなたのJavaの問題は異なる可能性があります)。

  5. 最後に、この時点までにデータが確認されると、同様にシステムデータ保存プロセスを実行しました。

データをサーバーにプッシュして取得するための小さな段階的な手順を実行することで明らかになった問題は6-7件ありました。最初はエンドツーエンドのことを行い、壁を打ちました。そのため、私たちは片面食事の開発/検証プロセスに切り替えました。私の2セントは価値がある。

あなたは、それはおそらくあなたがここで言及した問題に対処するのに役立ちますダウン問題を破る場合:

をしかし、画像が正しく表示されない(何かがデータベースに挿入されますん)。

何かは、データパス全体で非常に重要です。

あなたのシステム上のダウンロードコードは違うかもしれませんが、問題を小さなものに分解しないと簡単にマスクされるエラーを導入する一連の手順があることを説明するために私たちが含まれています。

var xhr = new XMLHttpRequest(); 
 
xhr.open... 
 
    xhr.responseType = "arraybuffer"; 
 
xhr.onload... =() => { 
 
    if (xhr.status === 200) { 
 
     var arrayBuffer = xhr.response; 
 
     var unsigned8Int = new Uint8Array(arrayBuffer); 
 
     // Here we had to convert the unsigned8bit array back to a JavaScript array. 
 
     // Then convert js byte[] to a string and prepend the image header as 
 
     // you are doing in your code. 
 
     // 
 
     // The last step was to prepend the image header as you are doing, but 
 
     // we used binary to asci. 
 
     var data = "data:image/jpeg;base64," + btoa(byte[]); 
 

 
    }; 
 
    xhr.setRequestHeader("Content-type", "application/octet-stream"); 
 
    xhr.send();

私は数年でJavaを使用していないが、私はあなたの実際の設計に関連するかもしれないいくつかの技術的な情報を浚渫することができます場合、私は表示されます。

関連する問題