上传文件并通过ajax-jQuery将其发送到控制器

时间:2017-06-27 19:36:22

标签: jquery ajax file-upload asp.net-web-api2

我想将表单参数发送到服务器。

这是我的HTML:

    <form enctype="multipart/form-data">
                <div>
                    <label>Name: *</label>
                    <input type="text" id="name"/>
                </div>
                <div>
                    <label>Description: *</label>
                    <input type="text" id="description"/>
                </div>
                <div>
                    <label>Rules: *</label>
                    <input type="text" id="rules"/>
                </div>
                <div>
                    <label/>Select File to Upload: <input id="fileUpload" type="file" />
                </div>
                <div>
                    <button type="button" id="confirm" value="Confirm">Confirm</button>
                </div>
            </form>

这是ajax电话:

    $(document).ready(function () {
         $("button#confirm").click(function () {
            var name = $("#name").val();
            var description = $("#description").val();
            var rules = $("#rules").val();

            var file = document.getElementById('fileUpload');
            if (file.files.length) {
                var picture = file.files[0];
            }

            var data = new FormData();
            data.append("name", name);
            data.append("description", description);
            data.append("rules", rules);
            data.append("picture", picture);


            $.ajax({
                type: "POST",
                async: false,
                url: "/api/forum/addNewForum",
                async: false,
                cache: false,
                contentType: undefined,
                processData: false,
                data: data
        });

我的控制员:

    [HttpPost]
    [AllowAnonymous]
    [Route("addNewForum")]
    public IHttpActionResult addNewForum()
    {       
        var picture= HttpContext.Current.Request.Files["picture"];      
        return Ok;
    }

但我总是在这一行中得到零

var picture= HttpContext.Current.Request.Files["picture"];    

问题是HttpContext.Current.Request.Files.Count始终为0。 这是我第一次做这样的事情。我究竟做错了什么?有没有更好的方法来做到这一点。提前谢谢!

1 个答案:

答案 0 :(得分:1)

您需要在此处对代码进行一些更改 用下面的替换你的ajax代码。

$("button#confirm").click(function () {

    var data = new FormData($("form")[0]);

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

然后尝试提交表单检查您得到的回复