クライアントjQueryを使用してJavaScriptまたはJavaScriptコードを呼び出すWCFサービスを呼び出すSystem.IO.Streamのコレクションを取得していますか？

Question

私はクライアント側のプレーンJavaScript とクライアント側のいくつかのjQuery JavaScriptでよく使われるWCFサービスを作成しています（ ）。それは それが一度にSystem.IO.Streamの コレクションを取得しますようにWCFサービスを呼び出すように

1）どのように私は、プレーン、クライアントJavaScriptを実装することができますか？また、コレクション内のSystem.IO.Stream オブジェクトをそれぞれHTMLイメージ要素に関連付けることができるように、平らなJavaScript側で受け取ったコレクションを通じて を反復する方法はありますか？

jqueryを使用するJavaScriptコードを実装すると、 がすぐにSystem.IO.Streamのコレクションを取得するようにWCFサービスを呼び出すことはできますか？さらに、 コレクション内の 各System.IO.StreamオブジェクトをHTMLイメージ要素に関連付けることができるように、jQueryを使用するJavaScript によって受け取られたコレクションを反復処理する方法はありますか？それは それが一度にSystem.IO.Streamの コレクションを取得しますようにWCFサービスを呼び出すように

/*********Start of Excerpt from the Interface Code of a WCF Service 

Contract*****************/ 

using System; 

using System.Collections.Generic; 

using System.Linq; 

using System.Runtime.Serialization; 

using System.ServiceModel; 

using System.ServiceModel.Activation; 

using System.Text; 

using System.ServiceModel.Web; 

using System.IO; 

using ConsoleForWCFServiceTutorial.PerlsDataContracts; 

using ConsoleForWCFServiceTutorial.DataAccessObjectsDAO; 


namespace ConsoleForWCFServiceTutorial 

{ 

    [ServiceContract(Namespace = 

"http://ConsoleForWCFServiceTutorial.CarService")] 

    public interface ICarService 

    { 

    [OperationContract] 

    [WebInvoke(Method = "GET", 

        BodyStyle = WebMessageBodyStyle.WrappedRequest)] 

     Stream[] getImagesList(); 




    } 

} 

/*********End of Excerpt from the Interface Code of a WCF Service 
Contract*****************/ 




/*********Start of Excerpt of the code associated with the Class that 
implements the WCF Service Contract*****************/ 

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Text; 
using System.Collections; 
using System.ServiceModel.Activation; 
using System.Configuration; 
using System.Data; 
using System.IO; 
using System.ComponentModel; 
using ConsoleForWCFServiceTutorial.PerlsDataContracts; 
using ConsoleForWCFServiceTutorial.DataAccessObjectsDAO; 


namespace ConsoleForWCFServiceTutorial 
{ 
     [AspNetCompatibilityRequirements(RequirementsMode = 
     AspNetCompatibilityRequirementsMode.NotAllowed)] 
class CarService : ICarService 
{ 

     public Stream[] getImagesList() 
     { 


      List<Stream> myImagesList = new List<Stream>(); 

      string fileName = Path.Combine("BMWpicture.jpg"); 

      FileStream fileStream = 
       new FileStream(fileName, FileMode.Open, FileAccess.Read); 
      // Set the content type as image/ jpeg 
      System.ServiceModel.Web.WebOperationContext. 
       Current.OutgoingResponse.ContentType = "image/jpeg"; 


      myImagesList.Add(fileStream); 

      string fileName2 = Path.Combine("MercedesBenzpicture.jpg"); 

      FileStream fileStream2 = 
       new FileStream(fileName2, FileMode.Open, FileAccess.Read); 
      // Set the content type as image/ jpeg 
      System.ServiceModel.Web.WebOperationContext. 
       Current.OutgoingResponse.ContentType = "image/jpeg"; 


      myImagesList.Add(fileStream2); 

      return myImagesList.ToArray(); 
     } 
    } 
} 
/*********End of Excerpt of the code associated with the Class that 
implements the WCF Service Contract*****************/ 


<!--Start of Excerpt of the plain JavaScript client code that 
invokes one of the Methods in the WCF Service 
Contract--> 

<script type="text/javascript"> 

function getImagesList2() { 

    var listOfStreams = 
'http://localhost:8732/Design_Time_Addresses/ConsoleForWCFServiceTutorial/carService  /getImagesList' 

    document.getElementById("image11").onload = function() { 
    }; // img.onload = function() 


     document.getElementById("image11").src = listOfStreams[0]; 



    document.getElementById("image12").onload = function() { 
     }; // img.onload = function() 


     document.getElementById("image12").src = listOfStreams[1]; 

} 
</script> 
<!--End of Excerpt of the plain JavaScript client code that 
invokes one of the Methods in the WCF Service 
Contract--> 

<!--Start of Excerpt of the HTML code that is affected by the 
JavaScript client and WCF Service interaction--> 
<body> 
    <form id="form1" runat="server"> 
    <div> 


       <img src="" id="image11" alt="Smiley face" />  

       <img src="" id="image12" alt="Smiley face" /> 


     <br /> 
     <a class="large blue button" id="A7" 
onClick="getImagesList2()">getImagesList2</a> 


     </div> 
    </form> 
</body> 
</html> 

<!--End of Excerpt of the HTML code that is affected by the 
JavaScript client and WCF Service interaction--> 

1）どのように私は、プレーン、クライアントJavaScriptを実装することができますか？また、コレクション内のSystem.IO.Stream オブジェクトをそれぞれHTMLイメージ要素に関連付けることができるように、平らなJavaScript側で受け取ったコレクションを通じて を反復する方法はありますか？

2）それはそう、それは 一度System.IO.Streamのコレクションを取得しますようにWCFサービスを呼び出す をjqueryのを使用するJavaScriptコードを実装することは可能ですか？さらに、 コレクション内の 各System.IO.StreamオブジェクトをHTMLイメージ要素に関連付けることができるように、jQueryを使用するJavaScript によって受け取られたコレクションを反復処理する方法はありますか？

Answer 1

CORCを有効にするWCFサービスを作成する必要があります。CORSを有効にすると、受信する画像のバイト配列から変換されたBase64Stringのリストが返されます。次に、この答えで - > https://stackoverflow.com/a/9464137/1488207をjqueryで受け取ったリストを1つずつ順番にimgタグに設定できます。 私はあなたが望むものをあなたに提供するつもりはない（バイト配列にイメージを変換してからBase64Stringsを返すことができるだろうと思うが）私はあなたの時間を節約するためにWCFサービスの設定とコードファイルをコピーできる私のWCFをjqueryからうまく消費するために多くの時間がかかりました）。

<?xml version="1.0"?> 

<system.web> 
    <compilation debug="true" targetFramework="4.0" /> 
</system.web> 
<system.serviceModel> 
    <services> 
     <service name="EmployeeService.EmployeeSearchService/*Your service name replaces EmployeeService.EmployeeSearchService */" behaviorConfiguration="DefaultServiceBehavior"> 
      <endpoint binding="webHttpBinding" contract="EmployeeService.IEmployeeSearchService"  behaviorConfiguration="DefaultEPBehavior" /> 
     </service> 
    </services> 
    <behaviors> 
     <endpointBehaviors> 
      <behavior name="DefaultEPBehavior"> 
       <webHttp /> 
      </behavior> 
     </endpointBehaviors> 
     <serviceBehaviors> 
      <behavior name="DefaultServiceBehavior"> 
       <serviceMetadata httpGetEnabled="true" /> 
       <serviceDebug includeExceptionDetailInFaults="true" /> 
      </behavior> 
     </serviceBehaviors> 
    </behaviors> 
    <serviceHostingEnvironment multipleSiteBindingsEnabled="true" /> 
</system.serviceModel> 
<system.webServer> 
    <modules runAllManagedModulesForAllRequests="true"/> 
    <!-- 
    To browse web app root directory during debugging, set the value below to true. 
    Set to false before deployment to avoid disclosing web app folder information. 
    --> 
    <directoryBrowse enabled="true"/> 
</system.webServer> 
<connectionStrings> 
    <add name="myConnString" connectionString=""/> 
</connectionStrings> 

IMPLEMENTATION

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Runtime.Serialization; 
using System.ServiceModel; 
using System.ServiceModel.Web; 
using System.Text; 
using System.Web.Script.Serialization; 

namespace EmployeeService 
{ 
    // NOTE: You can use the "Rename" command on the "Refactor" menu to change the    class name "Service1" in code, svc and config file together. 
// NOTE: In order to launch WCF Test Client for testing this service, please select Service1.svc or Service1.svc.cs at the Solution Explorer and start debugging. 
public class EmployeeSearchService : IEmployeeSearchService 
{ 
    public List<Customer> GetAllImages() 
    { 
     WebOperationContext.Current.OutgoingResponse.Headers.Add(
      "Access-Control-Allow-Origin", "*"); WebOperationContext.Current.OutgoingResponse.Headers.Add(
      "Access-Control-Allow-Methods", "POST"); WebOperationContext.Current.OutgoingResponse.Headers.Add(
      "Access-Control-Allow-Headers", "Content-Type, Accept"); 
     List<Base64String> s = new List<Base64String>(); 
     //DO YOUR IMAGE CONVERSION TO BYTE ARRAY AND THEN TO BASE64STRINGS AND ADD THEM TO THE LIST ABOVE 
     var jsonData = new 
     { 
      totalImages = s.Count, 
      Images = (
       from row in s 
       select new 
       { 
        imgString = row 
       } 
     ).ToArray() 
     }; 
     return (new JavaScriptSerializer()).Serialize(jsonData); 
    } 
} 
} 

INTERFACE

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Runtime.Serialization; 
using System.ServiceModel; 
using System.ServiceModel.Web; 
using System.Text; 
using EmployeeSearchService.BE; 
namespace EmployeeService 
{ 
// NOTE: You can use the "Rename" command on the "Refactor" menu to change the interface name "IService1" in both code and config file together. 
[ServiceContract] 
public interface IEmployeeSearchService 
{ 
    [OperationContract] 
    [WebInvoke(Method = "GET", 
     ResponseFormat = WebMessageFormat.Json, 
     RequestFormat = WebMessageFormat.Json, 
     BodyStyle = WebMessageBodyStyle.Bare)] 
    object GetAllImages(); 
} 
} 

このサービスをjqueryから以下のコードで呼び出すことができます。成功した場合、countとプロパティImageを含むオブジェクトを取得すると、 "result.Image [0]"によって配列をトラバースする必要があります。

$.support.cors = true; 
var methodName = '/GetAllImages'; 
var urlService = 'some http service url'; 
$.ajax({ 
    type: "GET", 
    url: urlService + methodName, 
    data: {}, 
    dataType: "Json", 
    processdata: "false", 
    success: function (result) { 
     if (result != null) { 
      images = $.parseJSON(result); 
      for(var i = 0 ; i < result.totalImages ; i++) 
       $('<img>').src('data:image/png;base64,' + result.Image[i]).insertAfter('#myDiv'); 
     } 
     else { } 
    }, 
    error: function (msg) { 
     alert(msg); 
    } 
}); 

さらなるヘルプが必要な場合は、教えてください。