如何在 MVC 的多文件上传视图中显示文件的大小以及文件名

Question

我有一个视图允许用户一次上传多个，如下所示

<label class="control-label">Files:</label>
<div id="fileUploadContainer">
    <div id="uploadContainer" style="height:30px">
        <input type="file" id="file1" name="file1" onchange="ValidateSingleInput(this);" />
    </div>
    <div class="controls">
        <div id="fileappend">
            <div id="fileappendContainer">
                <output id="filesSize"></output>
            </div>
        </div>
    </div>
</div>
<a id="btnAdd" href="#">Add Another</a>

代码“添加另一个”点击：

$(function () {
    $('#btnAdd').click(function (e) {
        e.preventDefault();
        var htmlFormatDiv = $("<div id='uploadContainer' style='height:30px'></div>");
        var htmlFormatFile = $("<input type='file' onchange='ValidateSingleInput(this);' />");
        var totalFileCount = $("#fileUploadContainer").children("div").length;
        var fuData = document.getElementById('<%= file1.ClientID %>');
        htmlFormatFile.attr("id", "file1");
        htmlFormatFile.attr("name", "file1");
        htmlFormatDiv.attr("id", "uploadContainer");
        htmlFormatDiv.append(htmlFormatFile);
        $("#fileUploadContainer").append(htmlFormatDiv);
        $("#filesSize").append(htmlFormatDiv);
    });
});

限制文件上传扩展类型和显示文件大小的代码

var _validFileExtensions = [".jpg", ".jpeg", ".pdf"];
function ValidateSingleInput(oInput) {
    if (oInput.type == "file") {
        var sFileName = oInput.value;
        if (sFileName.length > 0) {
            var fsize = sFileName.size;
            if (fsize > 4048576) {
                alert(fsize + " bites\nToo big!");
            }
            var blnValid = false;
            for (var j = 0; j < _validFileExtensions.length; j++) {
                var sCurExtension = _validFileExtensions[j];
                if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) 
                { 
                    blnValid = true;
                    $('#filesSize').append('Size - ' + ((oInput.files[0].size) / 1024 / 1024).toFixed(2) + 'mb' + '<br />');
                    break;
                }
            }
            if (!blnValid) {
                alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
                oInput.value = "";
                return false;
            }
        }
    }
    return true;
}

现在当我上传文件时，我得到低于 O/P

当我单击任何现有的浏览按钮再次浏览另一个文档时，就会出现问题。旧文件的大小将保留在那里，新文件的大小将附加到最后一个文件名，而与单击的浏览按钮无关。 有没有办法避免同样的情况？

还有比这更简单的方法吗。

控制器

public ActionResult file_upload(IEnumerable<HttpPostedFileBase> file1)
{
    foreach (var file in file1)
    {
        if (file != null)
        {
            if (file.ContentLength > 0)
            {
            }
        }
    }
}

Answer 1

您的主要问题是由于重复的id 属性和 jQuery 选择器（例如$('#filesSize').append(...）而生成无效的 html 只会选择具有该id 的第一个元素。您需要改用类名并使用相对选择器来选择要更新的正确元素。

不过，我建议对您的实施进行一些其他更改。

首先，考虑使用ValidationAttribute 作为文件大小，这将为您提供客户端和服务器端验证。请参考Client-side File Upload Size Validation in ASP.NET MVC 的实现示例。

其次，创建一个可以克隆、更新和附加到 DOM 的模板。您当前的代码正在做一些奇怪的事情，包括将新 div 添加到 <div id="fileUploadContainer"> 和第一个 <output id="filesSize"> elements. Its not really clear why you are using anelement or whatvar fuDatais (it would beundefined`) 或如何使用它。你的观点是

@using (Html.BeginForm(.....))
{
    <div id="fileUploadContainer"></div>
    <a id="btnAdd" href="#">Add a file</a>
}
// template
<div id="template" style="display:none;">
    <div class="uploadContainer" style="height:30px">
        <input type="file" class="file" name="files" />
    </div>
    <div class="controls">
        <div class="fileappend">
            <div class="fileappendContainer">
                <span class="filesSize"></span>
            </div>
        </div>
    </div>
</div>

那么脚本将是（不包括您的验证码）

var container = $('#fileUploadContainer');
var template = $('#template');
$('#btnAdd').click(function() {
    var clone = template.clone();
    container.append(clone.html());
    $(this).text('Add another file');
});
container.on('change', '.file', function() {
    var file = $(this).get(0).files[0];
    var fileSize = 'Size: ' + Math.round(file.size / 1024) + ' KB'
    $(this).parent('.uploadContainer').next('.controls').find('.filesSize').text(fileSize);
});

注意，如果您要实现FileSizeAtribute，那么模板会有一些额外的更改（为输入提供一个索引名称属性，包括输入中的data-val-* 属性并为验证消息），并且您需要在添加新文件输入时重新解析验证器。