Asp.net WebApi 傳遞json數據以及上傳文件 代碼!!

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章