使用jquery ajax上传文件到跨域WCF服务

本文关键字：WCF 服务 文件 jquery ajax 使用 | 更新日期: 2023-09-27 18:04:35

这是我想做的(不成功，我可能会补充)，并将感谢您能给我的任何方向

从我的HTML5网站，我想上传一个文件到IIS 7.5托管的跨域WCF服务。

除了上传文件，我还需要向服务器上的上传函数发送额外的参数

这是可能的吗?

下面是我的operationContract:

[OperationContract]
[WebInvoke( Method = "POST",
UriTemplate = "/uploadmodeldata/?id={Id}&customerdatatype={customerdatatype}&data={data}")]
void UploadModelData(string Id, string customerdataType, byte[] data);

这是我的jquery ajax请求

function FileVisits() {
    var uid = checkCookie1();
    userid = uid.toString().replace(/"/g, '');
    var fileData = JSON.stringify({
   Id:userid ,customerdatatype:scanupload,
        data: $('#fileBinary').val()
    });
    alert(fileData);
        "use strict";
        var wcfServiceUrl = "http://xxxxx:1337/Service1.svc/XMLService/";
        $.ajax({
            cache: false,
            url: wcfServiceUrl + "uploadmodeldata/",               
            data: fileData,
            type: "POST",
            processData: false,
            contentType: "application/json",
            timeout: 10000,
            dataType: "json",
            headers:    {
                        'User-agent': 'Mozilla/5.0 (compatible) Greasemonkey',
                        'Accept': 'application/atom+xml,application/xml,text/xml',
                    },
            beforeSend: function (xhr) {
                $.mobile.showPageLoadingMsg();
                xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

            },
            complete: function () {
                $.mobile.hidePageLoadingMsg();
            },
            success: function (data) {
                var result = data;

            },
            error: function (data) {
                alert("Error");
            }
        });
}

如果文件大小小于100 KB，则发生此错误

方法不允许

但如果文件大于100 KB，则发生此错误

413请求实体变大

如何从jquery ajax上传文件到跨域wcf。由于

使用jquery ajax上传文件到跨域WCF服务

它花了我很多的工作，但这里是我的代码(以防有人需要它):

$("#UploadFileBtn").click(function () {     
    fileName = document.getElementById("filePicker").files[0].name;
    fileSize = document.getElementById("filePicker").files[0].size;
    fileType = document.getElementById("filePicker").files[0].type;     
    var file = document.getElementById("filePicker").files[0];
    if (file) {
    // create reader
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(e) {
        var content = e.target.result;
        content = content.substring(content.indexOf('64') + 3);
        bhUploadRequest = "<SOAP-ENV:Envelope xmlns:SOAP-ENV='"http://schemas.xmlsoap.org/soap/envelope/'" " +
                                             "xmlns:SOAP-ENC='"http://schemas.xmlsoap.org/soap/encoding/'" " + 
                                             "xmlns:xsi='"http://www.w3.org/2001/XMLSchema-instance'" " +
                                             "xmlns:xsd='"http://www.w3.org/2001/XMLSchema'">" +
                             "<SOAP-ENV:Header>"+
                                "<m:FileName xmlns:m='"http://tempuri.org/'">" + fileName + "</m:FileName>" +
                                "<m:Length xmlns:m='"http://tempuri.org/'">" + fileSize + "</m:Length>" +
                             "</SOAP-ENV:Header>" +
                             "<SOAP-ENV:Body>" +
                                "<m:RemoteFileInfo xmlns:m='"http://tempuri.org/'">" +
                                    "<m:FileByteStream>" + content + "</m:FileByteStream>" +
                                "</m:RemoteFileInfo>" +
                             "</SOAP-ENV:Body>" +
                         "</SOAP-ENV:Envelope>";
        $.ajax({
            type: "POST",
            async: true,
            url: wsFtransferUrl,
            data: bhUploadRequest,
            timeout: 10000,
            contentType: "text/xml",
            crossDomain: true,
            beforeSend: function (xhr) {
                xhr.setRequestHeader("SOAPAction", "http://tempuri.org/IFileTransferService/UploadFile");
                xhr.setRequestHeader("TICKET", Ticket);
            },              
            success: function (data) {
            alert('succes');
                $(data).find("UploadFileResponse").each(function () {
                    alert($(this).find("UploadFileResult").text());
                });
            },
            error: function (xhr, status, error) {
                alert('error:' + error);
            }
        });
    };
}
    return;
    });

这是我的WCF转帐服务:

public void UploadFile(RemoteFileInfo request)
        {   
            string filePath = string.Empty;
            string guid = Guid.NewGuid().ToString();
            int chunkSize = 1024;
            byte[] buffer = new byte[chunkSize];
            long progress = 0;
            filePath = Path.Combine(uploadFolder, request.FileName);
            if (File.Exists(filePath))
                File.Delete(filePath);
            using (FileStream writeStream = new FileStream(filePath, FileMode.CreateNew, FileAccess.Write))
            {
          do
                {
                    // read bytes from input stream
                    int bytesRead = request.FileByteStream.Read(buffer, 0, chunkSize);
                    if (bytesRead == 0)
                        break;
                    progress += bytesRead;                    
                    // write bytes to output stream
                    writeStream.Write(buffer, 0, bytesRead);
                }
                while (true);
            }
        }

您正在获取Method not allowed，因为您正在尝试调用另一个域上的服务。这违反了同源策略。这是一个安全限制。大多数旧的浏览器会拒绝这样的请求。

如果你想在javascript中访问不同域的web服务，你需要设置跨域资源共享。

跨域资源共享(Cross-origin resource sharing, CORS)是一种允许web页面使xmlhttprequest到另一个域。这种"跨域"否则请求将被web浏览器禁止源安全策略。CORS定义了浏览器和服务器可以交互以确定是否允许跨源请求

如果您可以访问web服务代码，您可以在服务器上启用CORS请求。
启用cors是一个很好的资源。以下是对cors的一些解释

在IIS 7中，您需要在web.config中设置一些自定义头。

<system.webserver>
 <httpprotocol>
  <customheaders>
   <add name="Access-Control-Allow-Origin" value="*" />
   <add name="Access-Control-Allow-Headers" value="Content-Type" />
  </customheaders>
 </httpprotocol>
</system.webserver>
以下是IIS6 的步骤

至于413错误，这与绑定时允许的最大文件大小有关

<bindings>
    <webHttpBinding>
      <binding maxBufferSize="2147483647" maxReceivedMessageSize="2147483647" />
    </webHttpBinding>
</bindings>

问题在于"POST"。要解决这个问题，请执行以下操作

创建全局。asax并添加以下内容以启用Ajax跨域POST。

 public void Application_BeginRequest(object sender, EventArgs e)
        {
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST,OPTIONS");
            if ((HttpContext.Current.Request.HttpMethod == "OPTIONS"))
            {
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept");
                HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");
                HttpContext.Current.Response.End();
            }
        }
    }
相关文章：