这篇博客主要总结了 Asp.net WebApi 项目的前后端互传json以及上传文件的方法。
主要思路
在面向服务的架构模式中,整个网站前后端耦合度低,将前端作为主体,通过ajax与后台交换json数据。
上传文件通过input[type=‘file’]来获取file,并通过FormData传给后台。
前台代码
<input type="button" id="submit" value="submit" οnclick="f2()">
<script>
function f2() {
var formData = new FormData();
formData.append("name", $("#name").val());
formData.append("age", $("#age").val());
if ($("#pic")[0].files.length > 0) {
formData.append("pic", $("#pic")[0].files[0]);
}
$.ajax({
method: "POST",
url: "api/User/Func2",
data: formData,
dataType: "json",
contentType: false, //传文件必须!
processData: false, //传文件必须!
success: function (resp) {
console.log(resp);
},
});
}
</script>
后台代码 注意文件不需要加参数。用System.Web.HttpContext.Current.Request; 获取请求的文件及参数
public JObject Func2()
{
JObject returnJson = new JObject();
var request = System.Web.HttpContext.Current.Request;
var formData = request.Form;
string name = formData["name"];
string age = formData["age"];
if (request.Files.Count > 0)
{
var file = request.Files[0];
var savePath = AppDomain.CurrentDomain.SetupInformation.ApplicationBase + "uploadImgs/";
if (!Directory.Exists(savePath)) Directory.CreateDirectory(savePath);
file.SaveAs(savePath + file.FileName);
}
returnJson.Add("name", name);
returnJson.Add("age", age);
returnJson.Add("success", true);
return returnJson;
}