Question

我尝试上传带有ajax调用的文件并验证防伪令牌。我已经浏览了一下并构建了一种方法来验证控制器上的防伪标记。但是，每当我在视图上有@Html.AntiForgeryToken时，我的文件就不会被填充。即使它验证了防伪令牌。它似乎没有收到请求，但我不确定原因。

ajaxSendOverride：

$(document).ready(function () {

    var securityToken = $('[name=__RequestVerificationToken]').val();

    $(document).ajaxSend(function (event, request, opt) {
        if (opt.hasContent && securityToken) {   // handle all verbs with content

            var tokenParam = "__RequestVerificationToken=" + encodeURIComponent(securityToken);

            opt.data = opt.data ? [opt.data, tokenParam].join("&") : tokenParam;

            // ensure Content-Type header is present!
            if (opt.contentType !== false || typeof event.contentType !== 'undefined') {
                request.setRequestHeader("Content-Type", opt.contentType);
            }
        }
    });
});

的Ajax：

$(document).on("submit", "[data-upload-contract-form]", function (e) {
        e.preventDefault();
        var formData = new FormData($('[data-upload-contract-form]')[0]);
        if ($('[data-upload-file]').val() != "") {
            $.ajax({
                url: $(this).attr('action'),
                data: formData,
                type: 'POST',
                processData: false,
                contentType: false,
                headers: {
                    '__RequestVerificationToken': $('[name=__RequestVerificationToken]').val()
                },
                success: function (data) {
                    if (data.Success === true) {
                        $('[data-contract-error-message]').text();
                        ReturnDataTableForUploadFile($('[data-upload-file-supplier-contract-id]').val());
                        table.ajax.reload();
                    }
                    else {
                        $('[data-contract-error-message]').show();
                        $('[data-contract-error-message]').text(data.ResponseText);
                    }
                }
            })
            .fail(function () {
                $('[data-contract-error-message]').show();
                $('[data-contract-error-message]').text("Something went wrong uploading your file, please try again.");
            });
        }
        else {
            $('[data-contract-error-message]').show();
            $('[data-contract-error-message]').text("No contract to upload");
        }
    });

验证：

 public sealed class AuthorizeAntiForgeryToken : System.Web.Mvc.FilterAttribute, System.Web.Mvc.IAuthorizationFilter
    {
        public void OnAuthorization(AuthorizationContext filterContext)
        {
            var httpContext = filterContext.HttpContext;
            var cookie = httpContext.Request.Cookies[AntiForgeryConfig.CookieName];
            AntiForgery.Validate(cookie != null ? cookie.Value : null,
                                 httpContext.Request.Headers["__RequestVerificationToken"]);
        }
    }

控制器：

 public async Task<JsonResult> UploadContract(UploadContract model)
        {
            if (ModelState.IsValid)
            {
                try
                {
                    foreach (var item in model.Contracts)
                    {
                        string filePath = WebConfigurationManager.AppSettings["SupplierContractPath"] + GetSelectedClientId() + "\\" + item.FileName;

                        _supplierFileManager.UploadFile(item, filePath);

                        await _supplierFileManager.SaveContractToDatabase(model.SupplierContractID, item.FileName);
                    }
                    return Json(new { Success = true });
                }
                catch (Exception e)
                {
                    return Json(new { Success = false, ResponseText = e.Message });
                }
            }
            else
            {
                string errorMessage = "";
                foreach (var item in ModelState.Values.SelectMany(r => r.Errors))
                {
                    errorMessage += "<p>" + item.ErrorMessage + "</p>";
                }
                return Json(new { Success = false, ResponseText = errorMessage });
            }
        }

如何使用防伪令牌发送我的文件？

Answer 1

我今天遇到了这个问题而没有回答就遇到了这个问题。其他答案的链接不起作用，但过了一段时间我找到了解决方案。

防伪令牌必须位于表单字段中，而不是标题中。它也必须是表单数据中的第一个字段。所以要解决它，请执行：

$(document).on("submit", "[data-upload-contract-form]", function (e) {
        e.preventDefault();
        var formData = new FormData();
        formData.append('__RequestVerificationToken', $('[name=__RequestVerificationToken]').val());
        formData.append('file', $('[data-upload-contract-form]')[0]);
        if ($('[data-upload-file]').val() != "") {
            $.ajax({
                url: $(this).attr('action'),
                data: formData,
                type: 'POST',
                processData: false,
                contentType: false,
                success: function (data) {
                    if (data.Success === true) {
                        $('[data-contract-error-message]').text();
                        ReturnDataTableForUploadFile($('[data-upload-file-supplier-contract-id]').val());
                        table.ajax.reload();
                    }
                    else {
                        $('[data-contract-error-message]').show();
                        $('[data-contract-error-message]').text(data.ResponseText);
                    }
                }
            })
            .fail(function () {
                $('[data-contract-error-message]').show();
                $('[data-contract-error-message]').text("Something went wrong uploading your file, please try again.");
            });
        }
        else {
            $('[data-contract-error-message]').show();
            $('[data-contract-error-message]').text("No contract to upload");
        }
    });

我自己的功能（使用jQuery）工作正常:(它不完整，但至少报告它收到文件;）

<script type="text/javascript">
    function uploadFileThroughForm(messageId) {
        var form = $('#addAttachmentForm');
        if (form.valid()) {
            var files = $('#filenameToUpload').prop('files');
            if (files.length > 0) {
                if (window.FormData !== undefined) {
                    var formData = new FormData();
                    formData.append("__RequestVerificationToken", $('#addAttachmentForm input[name=__RequestVerificationToken]').val());
                    formData.append("file", files[0]);
                    $.ajax({
                        type: "POST",
                        url: '@ApplicationAdapter.GetVirtualRoot()Attachment/Add/' + messageId,
                        contentType: false,
                        processData: false,
                        data: formData,
                        success: function(result) {
                            alert(result.responseMessage);
                        },
                        error: function(xhr) {
                            alert(xhr.responseText);
                        }
                    });
                } else {
                    alert("This browser doesn't support HTML5 file uploads!");
                }
            }
        }
    }
</script>

希望这会有所帮助，即使你提出这个问题已经有一段时间了！

如何使用Ajax文件上传发送防伪标记？

1 个答案: