C# 如何使用jquery和Web API上传文件

我正在尝试从jQuery和WebAPI上传一个文件。如果我只上传一个文件，它就会工作。如果我再添加一些数据，它就不起作用了。下面是代码； JQuery代码：

<script type="text/javascript">
        $(document).ready(function () {
            $("#button1").click(OnUpload);
        });

        function OnUpload(evt) {
            //var files = $("#file1").get(0).files;
            var request = {
                Name: "test",
                Address: "address",
                Description: "desc",
                City: "city",
                files:$("#file1").get(0).files
            };

            var jsonData = JSON.stringify(request);

            if (files.length > 0) {
                if (window.FormData !== undefined) {
                    var data = new FormData();
                    for (i = 0; i < files.length; i++) {
                        data.append("file" + i, files[i]);
                    }
                    $.ajax({
                        type: "POST",
                        url: "http://localhost:51801/api/FileUpload/",
                        contentType: false,
                        processData: false,
                        data: jsonData + files,
                        success: function (results) {
                            for (i = 0; i < results.length; i++) {
                                alert(results[i]);
                            }
                        }
                    });
                } else {
                    alert("This browser doesn't support HTML5 multiple file uploads!");
                }
            }
        }
    </script>

$（文档）.ready（函数（）{
$（“#按钮1”）。单击（OnUpload）；
});
功能OnUpload（evt）{
//var files=$（“#file1”）.get（0）.files；
var请求={
名称：“测试”，
地址：“地址”，
描述：“描述”，
城市：“城市”，
文件：$（“#文件1”）.get（0）.files
};
var jsonData=JSON.stringify（请求）；
如果（files.length>0）{
if（window.FormData！==未定义）{
var data=new FormData（）；
对于（i=0；i

C#Web API代码：

public HttpResponseMessage Post(RequestP req)
        {
            HttpResponseMessage result = null;
            var httpRequest = HttpContext.Current.Request;
            if (httpRequest.Files.Count > 0)
            {
                var docfiles = new List<string>();
                foreach (string file in httpRequest.Files)
                {
                    var postedFile = httpRequest.Files[file];
                    var filePath = HttpContext.Current.Server.MapPath("~/" + postedFile.FileName);
                    postedFile.SaveAs(filePath);

                    docfiles.Add(filePath);
                }
                result = Request.CreateResponse(HttpStatusCode.Created, docfiles);
            }
            else
            {
                result = Request.CreateResponse(HttpStatusCode.BadRequest);
            }
            return result;
        }
    }

public class RequestP
    {
        public string Name { get; set; }
        public string Address { get; set; }
        public string Description { get; set; }
        public string City { get; set; }
        public List<HttpPostedFileBase> files { get; set; }
    }

公共httpresponsemessagepost（RequestP-req）
{
HttpResponseMessage结果=null；
var httpRequest=HttpContext.Current.Request；
如果（httpRequest.Files.Count>0）
{
var docfiles=新列表（）；
foreach（httpRequest.Files中的字符串文件）
{
var postedFile=httpRequest.Files[file]；
var filePath=HttpContext.Current.Server.MapPath（“~/”+postedFile.FileName）；
postedFile.SaveAs（文件路径）；
添加（文件路径）；
}
结果=Request.CreateResponse（HttpStatusCode.Created，docfiles）；
}
其他的
{
结果=Request.CreateResponse（HttpStatusCode.BadRequest）；
}
返回结果；
}
}
公共类请求
{
公共字符串名称{get；set；}
公共字符串地址{get；set；}
公共字符串说明{get；set；}
公共字符串City{get；set；}
公共列表文件{get；set；}
}

---

将HttpPostedFileBase从MVC控制器传递到ApiController也会有所帮助。

我不确定是否回答晚了，但这可能会帮助其他人解决您的问题

这就是我的工作原理：

Html文件/Mvc视图：

@{
    ViewBag.Title = "Home Page";
}

<label for="txtFile">Upload file: </label>
<input type="file" id="txtFile" name="file" />
<br />
<a href="#" id="lnkUploadFile">Upload File</a>

<script>
    $(function ()
    {
        var $txtFile = $('#txtFile'),
            files;
        var data = new FormData();
        $('#lnkUploadFile').click(function ()
        {
            uploadFile();
        });

        function uploadFile()
        {
            if ($txtFile.length)
            {
                files = $txtFile[0].files;
                data.append("UploadedImage", files[0]);
                data.append("ImageName", 'MyImage');
            }

            $.ajax({
                type: "POST",
                url: "/api/FileUpload/",
                contentType: false,
                processData: false,
                data: data
            }).then(function () { });
        }


    });

</script>

---

希望这有帮助。

我不确定我是否回答晚了，但这可能会帮助其他人解决您的问题

这就是我的工作原理：

Html文件/Mvc视图：

@{
    ViewBag.Title = "Home Page";
}

<label for="txtFile">Upload file: </label>
<input type="file" id="txtFile" name="file" />
<br />
<a href="#" id="lnkUploadFile">Upload File</a>

<script>
    $(function ()
    {
        var $txtFile = $('#txtFile'),
            files;
        var data = new FormData();
        $('#lnkUploadFile').click(function ()
        {
            uploadFile();
        });

        function uploadFile()
        {
            if ($txtFile.length)
            {
                files = $txtFile[0].files;
                data.append("UploadedImage", files[0]);
                data.append("ImageName", 'MyImage');
            }

            $.ajax({
                type: "POST",
                url: "/api/FileUpload/",
                contentType: false,
                processData: false,
                data: data
            }).then(function () { });
        }


    });

</script>

---

希望这有帮助。

请参阅控制器方法中的“如何访问其他表单数据”？我看不到您正在发送表单数据。请检查请求对象。我正在尝试发送要上载的文件以及一些其他字段。请仔细向下投票，参考问题已部分回答。请参阅控制器方法，如何访问其他表单数据？我看不到您正在发送表单数据。请检查请求对象。我正在尝试发送要上传的文件和一些其他字段。请仔细投票，参考问题已部分回答。