Question

这是我想要做的事情（不成功，我可能会补充），并希望你能给我任何方向

在我的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。感谢

Answer 1

我花了很多工作但这是我的代码（如果有人需要的话）：

$("#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);
            }
        }

Answer 2

您正在尝试调用其他域上的服务Method not allowed。这违反了Same origin policy。这是一个安全限制。大多数旧版浏览器都会拒绝此类请求。

如果您想在javascript中访问web服务的其他域，则需要设置Cross-Origin Resource Sharing。

跨域资源共享（CORS）是一种允许Web的机制将XMLHttpRequests转换为另一个域的页面。这样的“跨域” 否则，Web浏览器将禁止请求原产地安全政策。 CORS定义了浏览器和浏览器的方式服务器可以交互以确定是否允许跨领域请求

如果您可以访问Web服务代码，则可以在服务器上启用CORS请求 Enable cors是一个很好的资源。这是一些explaination on 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>

Here are the steps for IIS6

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

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

Answer 3

问题在于＆＃34; POST＆＃34;。要解决此问题，请执行以下操作

创建Global.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();
            }
        }
    }

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

3 个答案: