使用Jquery File Upload上传大型ish文件

问题描述

我正在解决将大型（> 45 MB）文件上传到带有jQuery-File-Upload插件的ASP.NET应用程序的问题。我将从文件控制器开始。

[HttpPost]
public ActionResult AddFiles(Guid id,HttpPostedFileBase[] fileList,Guid fileId)
{
    var files = new List<object>();

    foreach (var file in fileList)
    {
        files.Add(new
        {
            name = file.FileName,size = file.ContentLength
        });
    }

    return Json(new { files });
}

标记

<div id="[e-mail]" class="drop-card wide" data-id="@Model.Id" data-file="@upload.Id" data-is-multiple="true">
    <form class="text-right" enctype="multipart/form-data">
            <input class="fileupload" type="file" name="fileList" multiple="multiple" >
            <input type="hidden" name="fileId" value="@upload.Id">
            <input type="hidden" name="id" value="@Model.Id">
    </form>
</div>

JavaScript

    var $t = $(".drop-card");
    var url = "/filecontroller/addfiles"
    var $fileupload = $t.find('.fileupload');
    var $form = $t.find('form');

    $fileupload
        .fileupload({
            url: url,dataType: 'json',dropZone: $t,formData: $form.serializeArray(),singleFileUploads: false,autoUpload: false,add: function (e,data) {
                data.submit();
            },done: function (e,data) {
                console.log('done',data)
            }
        });
    });

问题

对于单个或多个小文件，可以在我的控制器方法中很好地填充fileList参数和后续变量。对于大文件，循环fileList时它会炸毁，并说它为空。这个似乎像一个异步问题，但我不知道如何解决。

我尝试过的事情

许多文章都建议在表单上使用enctype="multipart/form-data"，我已经这样做了。我的参数名称与表单输入对齐，并且在控制器方法上有一个[HttpPost]注释。

注意：在我的控制器中使用断点时，将填充id和fileId参数。 fileList对于大文件为空。

更新 这似乎越来越像服务器端的东西，它基于我在失败期间收到的net::ERR_CONNECTION_ABORTED和net::ERR_CONNECTION_RESET错误的数量。

解决方法

您尝试这种情况：

$("#BrowerfileUploadContractShedule").change(function () {
                var form = $('#formconditionContractSchedule')[0];
                var formData = new FormData(form);
                var fileUpload = $("#BrowerfileUploadContractShedule").get(0);
                var files = fileUpload.files;
                formData.append("file",files[0].name);
                $.ajax({
                    url: "Your link",type: 'POST',enctype: 'multipart/form-data',data: formData,dataType: 'json',asnyc: false,processData: false,contentType: false,success: function (response) {
                        alert(response)
                        $("#spindelayLoadData").modal("toggle");
                    }
                });
            })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" enctype="multipart/form-data" id="formconditionContractSchedule">
       <span class="btn btn-primary btn-file"> File Test 
       <input name="file" type="file" id="BrowerfileUploadContractShedule" onchange="$('#upload-file-info-ContractSchedule').html(this.files[0].name)">
       </span>
</form>

您将以下代码添加到 Web.config

<system.web><httpRuntime targetFramework="4.5" maxRequestLength="1073741824" maxQueryStringLength="32768" /></system.web>