MindFresher MindFresher - 1 year ago 167
jQuery Question

File Upload to a cross domain WCF service using jquery ajax

Here is what I am trying to do (unsuccessfully, I might add) and would appreciate any direction you can give me

From my HTML5 site, I want to upload a file to a cross domain WCF service that is hosted in IIS 7.5.

In addition to uploading the files, I need to send additional parameters to the upload function on the server

Is this possible to do?

Here is what my operationContract looks like:

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

Here is what my jquery ajax request

function FileVisits() {

var uid = checkCookie1();
userid = uid.toString().replace(/"/g, '');
var fileData = JSON.stringify({
Id:userid ,customerdatatype:scanupload,
data: $('#fileBinary').val()
"use strict";
var wcfServiceUrl = "http://xxxxx:1337/Service1.svc/XMLService/";
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) {

xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

complete: function () {

success: function (data) {
var result = data;

error: function (data) {


if file size is less then 100 kb this error occurred

Method not allowed

but if file is greater then 100 kb this error occurred

413 Request entity to large

How can I upload a file from jquery ajax to cross domain wcf.

Answer Source

You are getting the Method not allowed cause you are trying to call a service on another domain. This violates the Same origin policy. This is a security limitation. Most older browsers will deny such requests.

You will need to setup Cross-Origin Resource Sharing if you want to access a different domain the webservice in javascript.

Cross-origin resource sharing (CORS) is a mechanism that allows a web page to make XMLHttpRequests to another domain. Such "cross-domain" requests would otherwise be forbidden by web browsers, per the same origin security policy. CORS defines a way in which the browser and the server can interact to determine whether or not to allow the cross-origin request

If you have access to the webservice code, you can enable CORS requests at the server.
Enable cors is a good resource. Here is some explaination on cors

On IIS 7, you need to set a few custom headers in your web.config.

   <add name="Access-Control-Allow-Origin" value="*" />
   <add name="Access-Control-Allow-Headers" value="Content-Type" />

Here are the steps for IIS6

As for the 413 error, that is related to the max file size you allow on your binding

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