Question

我想显示所选的文件名和扩展名，如下图所示。所有这些都发生在HTML表单中。

我为此目的找到的最好的代码就是这个（也是我在图片上显示的内容）：

<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";
    }
?>

但是这段代码并没有显示出来。当然，它并没有因为我还没有提交表格。此外，我一直在寻找som jQuery / Javascript功能，但我发现没有任何适合或适合我的目的。

我的全部意图后来我会＆＃34;升级＆＃34;我的上传表单，用于上传多个文件。

如何让这个脚本有效？

Answer 1

您可以通过使用javascript抓取DOM的input，然后访问value属性来获取上传文件的名称。请注意，input必须已经由用户选择了该文件，因此在下面的示例中，我使用<button>点击处理程序来检查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);
});

Answer 2

通过使用on change事件，您可以获得带有扩展名的上传文件名。您可以使用javascript或jquery。以下代码使用的是javascript

<label for="uploaded_file">Vælg en fil:</label>
<input id="file" type="file" name="uploaded_file">
// added id for the tag to place the file name
<p id="file_name">Valgt fil:</p>

<script type="text/javascript">
    document.getElementById('file').onchange = function() {
    var input = document.getElementById('file').files[0].name; 
    var p_tag = document.getElementById('file_name');
    p_tag.innerHTML = p_tag.innerHTML +' ' + input;
}

</script>

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

2 个答案: