使用 Jquery File Upload 上传大（ish）文件

Posted 2023-05-09

【中文标题】使用 Jquery File Upload 上传大（ish）文件

【英文标题】：Uploading large(ish) files with Jquery File Upload

【发布时间】：2020-12-08 05:55:41

【问题描述】：

我正在对使用jQuery-File-Upload 插件将大型 (>45 MB) 文件上传到 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 错误的数量，这似乎越来越像服务器端的东西..

【参考方案1】：

你试试这个案例：

$("#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>

【讨论】：

看起来我的 maxRequestLength 已经设置得很高了

什么时候上传文件，是否在网页上显示文件名？

感谢您的回答，但如果可能，我希望继续使用 jquery-file-upload 插件。

好的。如果我能做到，我会帮助你更多。我有新答案我会发给你