Having trouble retrieving filenames using JavaScript with FileUpload?

Question

Having trouble retrieving filenames using JavaScript with FileUpload?

I am having trouble retrieving filenames and displaying them in the label lbName. I tried using asp:FileUpload but it's not working. Here is my code:

<asp:FileUpload ID="FileUpload1" AllowMultiple="true" runat="server" Onchange="upload()"/>                      <asp:Label ID="lbName" runat="server" ForeColor="Gray" Visible="True"></asp:Label>

Here is the JavaScript code I am using:

function upload() {
    var name = "";

    var files = document.getElementById("<%= FileUpload1.ClientID %>");
    for (var i = 0; i < files.length; i++) {
        name = name + (files[i].name) + ";";
    }
    document.getElementById("lbName").value = "1: " + name;
}

javascript c#asp.net webforms

Answer 1

Answer №1

To enable file uploads, you can utilize jQuery by attaching a change event listener to the input type=file.

<script type="text/javascript">

    $('input[type="file"]').change(function (e) {
        var files = [];
        for (var i = 0; i < $(this)[0].files.length; i++) {
            files.push($(this)[0].files[i].name);
        }
        $(this).next('span').html(files.join(', '));
    });

</script>

If you prefer pure javascript functionality:

<script type="text/javascript">

    function upload() {
        var name = "";
        var files = document.getElementById("<%= FileUpload1.ClientID %>");
        for (var i = 0; i < files.files.length; i++) {
            name = name + (files.files[i].name) + ";";
        }
        document.getElementById("<%= lbName.ClientID %>").innerHTML = "1: " + name;
    }

</script>

Answer 2

To enable file uploads, you can utilize jQuery by attaching a change event listener to the input type=file.

<script type="text/javascript">

    $('input[type="file"]').change(function (e) {
        var files = [];
        for (var i = 0; i < $(this)[0].files.length; i++) {
            files.push($(this)[0].files[i].name);
        }
        $(this).next('span').html(files.join(', '));
    });

</script>

If you prefer pure javascript functionality:

<script type="text/javascript">

    function upload() {
        var name = "";
        var files = document.getElementById("<%= FileUpload1.ClientID %>");
        for (var i = 0; i < files.files.length; i++) {
            name = name + (files.files[i].name) + ";";
        }
        document.getElementById("<%= lbName.ClientID %>").innerHTML = "1: " + name;
    }

</script>

Having trouble retrieving filenames using JavaScript with FileUpload?

Answer №1

Similar questions

Learn how to implement autofocus for an ng-select element within a bootstrap modal

Using AngularJS to send a 2D array via POST request

Is it truly possible to return a reactive variable that updates its value asynchronously?

Define a property within an object literal that sets a function's property

The connection to port 7054 for RemoteWebDriver could not be established within the allocated 45000 milliseconds

sending data directly from the ViewModel to the controller instead of passing it through another class (files) in the view

Performing tasks when a component is fully loaded in Vue.js Router

Is there a way to customize setInterval for a specific element?

Incorporate React to import a file from the parent directory

Using JavaScript in PHP files to create a box shadow effect while scrolling may not produce the desired result

What is the best way to retrieve a list of customers within a specified date range?

How to achieve an endless cycle using Promise recursion in a NodeJS environment

Switching Bootstrap Navbar Active State with JavaScript

Display a preview window once the image has been chosen

Change HTML table information into an array with the help of JavaScript

Optimizing ASP.NET: Effective method for preserving label.text data during postback utilizing PageMethods

Utilizing ASP.NET with ModalPopupExtender for a Smooth Click Interaction

Having trouble retrieving the tag name, it seems to be giving me some difficulty

Overcoming Troublesome Login Input Box in Web

Showing the value of a variable in the select dropdown field while editing using React Bootstrap