在上传表单中显示所选文件的名称

Question

I want to show the selected filename and extension as seen on picture below. All this takes place inside a HTML form.

The best code that i have found for this purpose is this (also what i shown on picture):

<label for="uploaded_file">Vælg en fil:</label>
<input type="file" name="uploaded_file">
<p>Valgt fil:</p>
<?php
    if(isset($_FILES['uploaded_file']['name'])) {
        echo $_FILES['uploaded_file']['name']." was uploaded";
    }else{
        echo "No File Uploaded";
    }
?>

But this code doesn't show it. And ofcourse it doesn't because i haven't submitted the form yet. Also i have been looking for som jQuery/Javascript features, but i have found none that fit or could fit my purpose.

My whole intension is later on i will "upgrade" my upload form for upload of multiple files.

How can i make this script working?

Answer 1

You can get the name of the uploaded file by grabbing the input off the DOM with javascript, and then accessing the value property. Note, the input must have the file already selected by the user, so in the example below I use a <button> click handler to check the value.

HTML:

<label for="uploaded_file">Vælg en fil:</label>
<input id="file" type="file" name="uploaded_file">
<p>Valgt fil:</p>

<button id="btn">Get File Name</button>

JavaScript:

var input = document.getElementById('file');

// Attach click handler to button.
document.getElementById('btn').addEventListener('click', function() {
    // Grab name of uploaded file (use the `value` property of the input element).
    alert(input.value);
});