2016-04-15 13 views
2

サーバーにオーディオファイルをアップロードし、サーバーの応答から画像を表示する必要があります。私はJavaスクリプトとajaxを初めて使っています。私は入力タグからajax呼び出しにオーディオファイルを取得しようとしていますが、不正な呼び出しを返します。私は、Java Webサービスにオーディオファイルをアップロードする必要がありますし、ファイル形式として画像を返すので、この画像ファイルをプレビューとして表示する必要があります。それを行う方法はありますか?事前のおかげでサーバーにオーディオファイルをアップロードし、サーバーから画像を設定する

<body> 
<form role="form" id="serviceReq" method="post" 
    enctype="multipart/form-data"> 
    Upload File : <input type="file" name="audio" 
     id="audioFile" title="Upload File"> 
    <button>Submit</button> 
</form> 
<div> 
    <!-- set Response image from server --> 
    <img alt="" id="preImage" src=""> 
</div> 

service.request.js

$(function() { 
var formName = "#serviceReq"; 
$(formName) 
     .on(
       'submit', 
       function(e) { 
        var documentData = new FormData(); 
        documentData.append('audio', $("#audioFile").prop(
          'files')[0]); 
        e.preventDefault(); 
        $.support.cors = true; 
        $ 
          .ajax({ 
           url : 'http://192.168.2.11:8082/SoundWaveService/audioWave/addAudioNew', 
           method : 'POST', 
           crossDomain : true, 
           contentType : 'multipart/form-data', 
           dataType : 'script', 
           data : documentData, 
           beforeSend : function() { 
           }, 
           success : function(data) { 
            /** 
            * set images to #preImage from server 
            * response 
            */ 
           }, 
           error : function(e) { 
            alert(e); 
           } 
          }); 
       });}); 

Javaで私のサービスメソッド

@Path("/addAudioNew") 
@POST 
@Produces(MediaType.APPLICATION_OCTET_STREAM) 
@Consumes(MediaType.MULTIPART_FORM_DATA) 
public Response insertAudioWaveNew(@FormDataParam("audio") InputStream audioFile) throws Exception { 
    File response = null; 
    response = fetchService.insertAudioNew(audioFile); 
    return Response.ok(response, MediaType.APPLICATION_OCTET_STREAM) 
      .header("Content-Disposition", "attachement; filename=\"" + response.getName() + "\"").build(); 
} 

答えて

1

これを試してください:

$(function() { 
var formName = "#serviceReq"; 
$(formName).on('submit', function(e) { 
    e.preventDefault(); 

    var documentData = new FormData(); 
    documentData.append('audio', $("#audioFile")[0].files[0]); 
    $.support.cors = true; 

    $.ajax({ 
     url : 'http://192.168.2.11:8082/SoundWaveService/audioWave/addAudioNew', 
     method : 'POST', 
     crossDomain : true, 
     contentType : 'multipart/form-data', 
     processData: false, //New 
     data : documentData, 
     beforeSend : function() { }, 
     success : function(data) { 
      /** 
      * set images to #preImage from server 
      * response 
      */ 
     }, 
     error : function(e) { 
      alert(e); 
     } 
    }); 
}); 
}); 

クロスドメインajaxリクエストを使用する場合、サーバーは応答ヘッダーにAccess-Control-Allow-Origin: *を追加する必要があります。

関連する問題