C#文件操作-Ajax调用webservice实现文件上传(含源码)

最近有不少的小伙伴咨询问，前后端分离后，怎么样实现Ajax调用webservice实现上传文件呢？有很多小伙伴在实现的过程中也遇到了不少问题，比如：

1、无法访问到webservice服务，老是报500错误

2、ajax调用webservice服务时遇到了不能跨域访问的问题

3、调用服务成功后，webservice返回数据ajax无法接收到，总是一直报错，也不知道怎么回事。

4、不知道怎么样让webservice返回json格式的数据

针对这些问题我给小伙伴们准备了一些实际的应用案例。把ajax调用webservice服务实现了一下。

在实现过程中也遇到了小伙伴们提到以上三种问题，现在根据自己实现的过程来逐个回答一下解决这三个问题的方法。

第一个问题，就是无法访问webservice服务，报500错误。造成这个问题的原因有两个：

1、是开发工具的原因，开发工具不能访问服务的配置文件，一直提示无权限，我的解决办法是右键选择项目，然后选择属性，在属性窗口中选择Web

然后在右边找到服务器选择本地IIS后点击创建虚拟目录，后在启动webservice就可以找到了(这种解决方案，不能彻底解决工具的权限问题，但可以快速解决问题，不影响继续工作)。

如图

第二个问题就是ajax调用webservice服务时遇到了不能跨域访问的问题。这个问题其实很简单，解决办法如下：

第一步需要我们把服务的[System.Web.Script.Services.ScriptService]这句代码的注释给去掉，允许前端使用脚本调用服务

第二步我们在配置文件中把下面代码加入进去，就允许跨域调用了。

<system.webServer>
	<httpProtocol>
		<customHeaders> <!--这里就是配置允许跨域访问服务的-->
			<add name="Access-Control-Allow-Origin" value="*" />
			<add name="Access-Control-Allow-Headers" value="Content-Type" />
			<add name="Access-Control-Allow-Methods" value="GET, POST" />
		</customHeaders>
	</httpProtocol> 
</system.webServer>

第三个问题是调用服务成功后，webservice返回数据ajax无法接收到，总是一直报错并直接执行了ajax的 error: function () { }错误处理的方法，而不执行success: function()中的代码，这个原因其实是因为webservice返回的XML格式的数据，不是json格式的数据，返回后ajax就会报错。

解决这个问题其实只需要让webservice返回ajax要的json数据形式就可以，字符串格式的或是json对象形式的都行，这里我用了一种简单直接的方式，具体看代码：

//webserivce返回的是XML格式，用下面的方式直接返回json字符串，前台处理成json对象就可以了
Context.Response.Write("{\"msg\":\"0\"}");
Context.Response.End();

就是使用了响应输出的方式，直接写成前端要的json字符串格式。

ajax接收到json字符串后只要简单处理一下就可以使用，不会在报错了。

ajax处理的方法如下：

function updataFile() {
    var formData = new FormData();
    var ts = document.getElementById("upload").files[0];
    formData.append("file", ts);
    $.ajax({
            method: "POST",
            url: "http://localhost/WebApplication1/WebService1.asmx/UploadFile",
            data: formData,
            dataTpe: "json",
            contentType: false, //传文件必须！
            processData: false, //传文件必须！
            success: function (data) {
            //后台返回的是JSON字符串，这里使用JSON.parse()转换成对象
            alert(JSON.parse(data).msg);
            },
        });            
}

这样前端就能随意处理。

第四个问题，webservice返回json字符串的方法其实就是使用响应输出的方式直接输出json字符串就可以了，就是下面这两句代码:

//webserivce返回的是XML格式，用下面的方式直接返回json字符串，前台处理成json对象就可以了
Context.Response.Write("{\"msg\":\"0\"}");
Context.Response.End();

最后，感谢你能耐心的看到这里，点击可以下载源码

我的文章可以转发，转发时请注明出处，谢谢支持！