這篇博客主要總結了 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;
}