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

【问题标题】：Show name of chosen fil inside upload form在上传表单中显示所选文件的名称
【发布时间】：2016-06-15 20:13:22
【问题描述】：

我想显示选定的文件名和扩展名，如下图所示。所有这些都发生在 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";
    }
?>

但是这段代码没有显示出来。当然不是因为我还没有提交表格。我也一直在寻找一些 jQuery/Javascript 功能，但我发现没有一个适合或适合我的目的。

我的全部意图是稍后我将“升级”我的上传表单以上传多个文件。

我怎样才能使这个脚本工作？

【问题讨论】：

标签： javascript php jquery forms file-upload

【解决方案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);
});

【讨论】：

感谢您的快速答复。这确实有效，但请注意我想要的额外按钮。
那么不要使用额外的按钮 :) 我只是把它放在那里，这样你就可以在本地测试它了。当您准备好使用它时，只需抓住input 的value。第一段是答案，代码示例只是展示了一种重现它的方法。
我不记得如何绕过按钮了:(
什么时候需要文件名？
在“input type="file"”中选择图片时

【解决方案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>

【讨论】：