Question

在MVC应用程序中，我让用户上传文件，然后进行一些错误处理。这部分工作正常。

文件输入为：

<div class="col-md-3" id="browsebutton">
                <label class="btn btn-primary btn-file">
                    Browse<input type="file" id="FileUpload" name="FileUpload" class="" />
                </label></div>

我想在用户选择文件后立即显示该文件名，因此我添加了这段JavaScript和一个onChange="getFileName()：

        function getFileName() {
            str = document.getElementById("FileUpload").value;
            var filename = str.substring(12, str.length);

            document.getElementById("browsebutton").innerHTML += filename;
        }
        var coll = document.getElementsByClassName("collapsible");
        var i;

这将正确显示文件名。但是，一旦添加此文件，FileUpload在我的控制器中将变为空。

此JavaScript如何干扰我的文件上传？

Answer 1

替换此行：

document.getElementById("browsebutton").innerHTML += filename;

使用：

var fnSpan = document.createElement("span");
fnSpan.innerText = filename;
document.getElementById("browsebutton").appendChild(fnSpan);

操作方式是设置innerHtml的内容，最终清除输入（输入的值不是innerHtml字符串的一部分）。请改用DOM操作方法。

您还可以将范围设为DOM的永久部分，只需在代码中设置其innerText。

输入类型=文件，JavaScript之后FileUpload消失

1 个答案: