3

我正在创建一个 WCF 服务，该服务将由客户端的纯 JavaScript 和客户端的一些 jQuery JavaScript 使用。

1) 我怎样才能实现普通的客户端 JavaScript，以便它以这样的方式调用 WCF 服务，以便立即检索 System.IO.Stream 的集合？此外，我将如何遍历在纯 JavaScript 端接收到的集合，以便可以将集合中的每个 System.IO.Stream 对象与 HTML 图像元素相关联？

2) 是否有可能实现使用 jquery 的 JavaScript 代码，以便它以这样的方式调用 WCF 服务，即一次检索 System.IO.Stream 的集合？此外，我将如何遍历使用 jQuery 的 JavaScript 接收的集合，以便可以将集合中的每个 System.IO.Stream 对象与 HTML 图像元素相关联？

 /*********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，以便它以这样的方式调用 WCF 服务，以便立即检索 System.IO.Stream 的集合？此外，我将如何遍历在纯 JavaScript 端接收到的集合，以便可以将集合中的每个 System.IO.Stream 对象与 HTML 图像元素相关联？

2) 是否有可能实现使用 jquery 的 JavaScript 代码，以便它以这样的方式调用 WCF 服务，即一次检索 System.IO.Stream 的集合？此外，我将如何遍历使用 jQuery 的 JavaScript 接收的集合，以便可以将集合中的每个 System.IO.Stream 对象与 HTML 图像元素相关联？

4

1 回答 1

2

您需要创建一个启用 CORS 的 WCF 服务，该服务将返回 Base64String 的列表（从您想要接收的图像的字节数组转换而来）。然后通过这个答案-> https://stackoverflow.com/a/9464137/1488207您可以将它们逐个设置为 img 标签，遍历您在 jquery 中收到的列表。我不会为您提供您想要的（我想您可以将图像转换为字节数组，然后返回 Base64Strings ），但我可以复制我的 WCF 服务的配置和代码文件以节省您的时间（花了我花了很多时间从 jquery 成功使用我的 WCF）。

<?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>

执行

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);
    }
}
}

界面

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 调用此服务，如果成功，您将获得一个包含计数和属性 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);
    }
});

告诉您是否需要更多帮助。

于 2013-03-13T20:11:21.843 回答