ASP.Net控件选择文件（不上传）

Question

I want to have a control which allows a user to click a link button, a file dialog comes up and the user selects a file. Currently I am using the FileUpload control as such:

<asp:LinkButton ID="btnDocumentLocation" runat="server" CausesValidation="False">Please Select...</asp:LinkButton>
<asp:FileUpload ID="fuDocumentLocation" style="display:none;" runat="server" ClientIDMode="AutoID" />

And in the code behind I have in Page_Load :

btnDocumentLocation.OnClientClick = "$('[id*=\"" + fuDocumentLocation.ClientID + "\"]').click();";

This launches the (hidden) FileUpload control where you select your file. In Page_Load it checks the file as below and updates the Text of the LinkButton . I do not need the actual file contents, just the file location:

if (IsPostBack && fuDocumentLocation.PostedFile != null && fuDocumentLocation.PostedFile.FileName.Length > 0)
{
    btnDocumentLocation.Text = fuDocumentLocation.PostedFile.FileName;
}
else
{
    btnDocumentLocation.Text = "";
}

This all works fine when ran locally. When published, the FileUpload seems to have an issue in the "uploading" part. It doesn't post back to the server and therefore can't run the Page_Load code to populate the btnDocumentLocation.Text property. I don't need it to grab the file, I just need the file location.

What I need to happen in order:

• User clicks on LinkButton
• File dialog box pops up
• User selects a file
• LinkButton Text property set to full file name selected

Is there a control that allows for this without the overhead of getting the file data in the request? And will allow you to select files across different shares?

Answer 1

Why do you post back the page if you only want to change the text ? Instead, you can achieve the same without postback using Jquery/Javascript as mentioned below:

<asp:LinkButton runat="server" ID="btnDocumentLocation" OnClientClick="return GetFile();" >Browse...</asp:LinkButton>
<asp:FileUpload runat="server" ID="fuDocumentLocation" OnChange="ChangeText(this.value);" style="display: none" />


<script type="text/javascript">
    function ChangeText(selectedPath) {
        $('#' + '<%=btnDocumentLocation.ClientID%>').text(selectedPath);
    }

    function GetFile() {
        $('#' + '<%=fuDocumentLocation.ClientID%>').click();
        return false;
    }
</script>

If you want to use Pure JQuery then:

<asp:LinkButton runat="server" ID="btnDocumentLocation"  >Browse...</asp:LinkButton>
<asp:FileUpload runat="server" ID="fuDocumentLocation"  style="display: none" />


<script type="text/javascript">

    $(document).ready(function() {
        $('#' + '<%=btnDocumentLocation.ClientID%>').click(function () {
            $('#' + '<%=fuDocumentLocation.ClientID%>').click();
            return false;
        });

        $('#' + '<%=fuDocumentLocation.ClientID%>').change(function () {
            var selectedPath = $('#' + '<%=fuDocumentLocation.ClientID%>').val();
            $('#' + '<%=btnDocumentLocation.ClientID%>').text(selectedPath);

        });
    });
</script>

Answer 2

<asp:LinkButton runat="server" ID="btnDocumentLocation"  >Browse...</asp:LinkButton>
<asp:FileUpload runat="server" ID="fuDocumentLocation"  style="display: none" />


<script type="text/javascript">

$(document).ready(function() {
    $('#' + '<%=btnDocumentLocation.ClientID%>').click(function () {
        $('#' + '<%=fuDocumentLocation.ClientID%>').click();
        return false;
    });

    $('#' + '<%=fuDocumentLocation.ClientID%>').change(function () {
        var selectedPath = $('#' + '<%=fuDocumentLocation.ClientID%>').val();
        $('#' + '<%=btnDocumentLocation.ClientID%>').text(selectedPath);

    });
});