asp.net - 如何根据 FileUpload 控件更改更新 UI

Question

我在页面上有一个 FileUpload 控件。用户选择文件后，我需要根据文件名更改一些值。我正在尝试找出最好的方法来做到这一点。我能看到的唯一选择是在 JavaScript 中侦听更改事件，然后……

a) 强制回发并更新表格

b) 使用 JavaScript 和一些后端异步调用在客户端更新内容。

还有其他选择吗？如果没有，哪个更可取？

谢谢

Answer 1

如果您使用的是 jquery，则可以将函数附加到change文件上传。

考虑以下示例 html：

<input id="myFile" type="file">
<p><label id="myLabel">No File</label></p>

假设我们想label用所选文件的名称更新 。为此，我们将使用以下 javascript：

$(document).ready(function () {
    $("#myFile").change(function () {
        $("#myLabel").html($(this).val());
    });
});

这是一个正在运行的小提琴：http: //jsfiddle.net/ffkuL/1/

如果您不使用 jquery，则可以执行以下操作：

var upload = document.getElementById("myFile");

upload.onchange = function (e) {   
    var label = document.getElementById("myLabel");
    label.innerHTML = this.value;
};

这是一个小提琴：http: //jsfiddle.net/8PYwK/

（不过，老实说，我发现从长远来看，在处理 ASP.NET 控件时使用 jquery 会简单得多。）

显然，我的示例中更改的标签只是示例。但是，按照这种模式，您可以在客户端进行任何您需要的更改（而不是需要回发）。