javascript - 通过 AJAX POST 请求将大文件传递到服务器时出错(IIS 7、ASP.NET MVC 4)

Question

这是我在 StackOverflow 上的第一篇文章，所以如果我的问题采用非常规范式，我提前表示歉意。我在 Intranet 站点上有一个表单，允许用户通过将文件传递到服务器来上传文件。将文件传递到服务器的 js 函数如下所示。此代码在较小的文件(测试最大 900kb)上完美运行，但较大的文件 (9mb) 会产生 500 错误甚至没有到达服务器。

function UploadDocument(customSectionId, evaluationSectionId) {
    if ($('#eval-attachment-modal-file')[0].files != null) {
        if (customSectionId != null && customSectionId == -1) {
            customSectionId = null;
        }
        if (evaluationSectionId != null && evaluationSectionId == -1) {
            evaluationSectionId = null;
        }
        var file = $('#eval-attachment-modal-file')[0].files[0];
        if (file) {
            var fd = new FormData();
            fd.append("fileToUpload", file);
            fd.append("evalId", EvalId);
            fd.append("customSectionId", customSectionId);
            fd.append("evaluationSectionId", evaluationSectionId);
            fd.append("canUploadImages", @(Model.CanUploadImages ? "true" : "false"));
            fd.append("canUploadDocuments", @(Model.CanUploadDocuments ? "true" : "false"));
            $('#upload-file-button').hide();
            $('#upload-file-spinner').show();
            $.ajax({
                url: '@Url.Action("UploadDocument")',
                type: 'POST',
                datatype: 'json',
                data: fd,
                processData: false,
                contentType: false,
                success: function (response) {
                    if (response != null && response.success) {
                        $('#evaluation-attachment-grid').trigger('reloadGrid');
                        if (evaluationSectionId == @((int) EvaluationSection.ExecutiveSignature)) {
                            var checkbox = $('#ExecutiveSignatureSignedOff');
                            var dateFieldForCheckbox = $('#ExecutiveSignatureSignedOffDate');
                            if (!checkbox.is(':checked')) {
                                checkbox.prop('checked', 'true');
                                dateFieldForCheckbox.val('@(DateTime.Now.ToShortDateString())');
                                SaveEvaluation(function () { AlertSuccess('Executive signature successfully uploaded. Evaluation saved.'); });
                            }
                        }
                    }
                    else {
                        if (response != null) {
                            if (response.errorMessages != null) {
                                for (var i = 0; i < response.errorMessages.length; i++) {
                                    AlertError(response.errorMessages[i]);
                                }
                            }
                        }
                        else {
                            AlertError('Uploading Document Failed. Please contact your I.T. administrator.');
                        }
                    }
                    $('#upload-file-spinner').hide();
                    $('#upload-file-button').show();
                },
                async: true
            });
        }
    }
}

在调试浏览器时，当它尝试发送 XMLHttpRequest 时，浏览器指出 jquery 中发生了错误(xhr.send 行被炸毁了)

            try {

                // Do send the request (this may raise an exception)
                xhr.send( options.hasContent && options.data || null );
            } catch ( e ) {

                // #14683: Only rethrow if this hasn't been notified as an error yet
                if ( callback ) {
                    throw e;
                }
            }

我的一位同事表示，当尝试将大文件传递到服务器时，IIS 有时会与您作对，因此我将此建议代码添加到我的 Web 配置中，但无济于事

<system.webServer>
<security>
  <requestFiltering>
    <!-- maxAllowedContentLength is in bytes (B)  -->
    <requestLimits maxAllowedContentLength="20971520"/>
    <!-- 20MB -->
  </requestFiltering>
</security>
</system.webServer>

我怀疑是 IIS 搞砸了，但坦率地说，我没有想法。请SO社区指教

Answer 1

一般来说，您不受客户端文件大小的限制，而是几乎总是在服务器端。 IIS 中的默认值相当低，以防止人们上传导致服务器空间不足的文件。例如，想想允许人们上传数 GB 视频文件的服务；如果浏览器一开始就阻止这些上传，它们就不会存在。

您在上面显示的是 FormData 的正确用法进行支持 AJAX 的文件上传。

对于 ASP.NET 应用程序，您可能还需要配置 maxRequestLength <httpRuntime> 的属性web.config 中的节点。请注意，此值以 千字节 为单位指定，而 maxAllowedContentLength以字节指定。

总而言之，要允许上传最大 20MB 的文件，您应该在 web.config 中进行这些设置。文件:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.web>
    <!-- 20 MB specified in kilobytes -->
    <httpRuntime maxRequestLength="20480" />
  </system.web>
  <system.webServer>
    <security>
      <requestFiltering>
        <!-- maxAllowedContentLength is in bytes (B)  -->
        <requestLimits maxAllowedContentLength="20971520"/>
        <!-- 20MB -->
      </requestFiltering>
    </security>
  </system.webServer>
</configuration>

为了改善用户体验，您可以在开始上传之前通过查看 file.size 检查文件的大小。属性:

var file = $('#eval-attachment-modal-file')[0].files[0];
if (file && file.size <= 20971520) {
    // proceed with upload
} else {
    // file too large, show error
}