如何根據FileUpload控件更改更新UI

Question

我在頁面上有一個FileUpload控件。一旦用戶選擇文件，我需要根據文件名更改一些值。我試圖找出最好的方法來做到這一點。我能看到的唯一選擇就是在JavaScript偵聽change事件，然後要麼..

一）強制回發和更新使用JavaScript和一些回來在客戶端更新的東西形式

B）結束異步調用。

有沒有其他的選擇，如果不是哪個更好？

感謝

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更簡單）。

顯然，我的示例中的標籤更改只是示例。但是，按照這種模式，您可以在客戶端進行所需的任何更改（而不必回發）。