Javascript 处理从文件输入中选择文件的操作

我正在尝试将所选文件的文件名显示在文件选择器的主体中。这是一个Asp.Net核心视图。我有以下文件输入：

<div class="form-group file-upload-wrapper">
    <input id="the-file" type="file" name="name" onchange="handleFile()" />    
    <label class="custom-file-label" for="the-file">Choose a file</label>                        
</div>

就目前情况而言，我得到了一个错误：

ReferenceError: handleFile is not defined

我的假设是handleFile需要如下所示：

@section Scripts {
<script language="javascript"> 

    function handleFile(file) {
        console.log(file);         
    }       

document.getElementById("the-file").title = file.files[0].name;

我的观点正确吗？为什么我会出现上述错误

jshiddle

const handleFile=文件=>{ console.log文件； } 选择一个文件

---

您可以为此使用事件处理程序。删除该元素的onchange属性表单并使用以下内容：

document.getElementById'the-file' .addEventListener'change'，e=>{ 手绢 }; 函数handlefile{ console.logfile.target.value； } 以下是片段： document.getElementById'the-file' .addEventListener'change'，e=>{ 手绢 }; 函数handlefile{ console.logfile.target.value； logfile.target.value； } 函数logmsg{ document.getElementById'result'.innerText=msg； } 选择一个文件 从中，您需要修改如下代码：

<div class="custom-file">
    <input type="file" class="custom-file-input" id="the-file" name="name"/>
    <label class="custom-file-label" for="the-file">Choose a file</label>
</div>

@section Scripts
{
  <script>
     document.getElementById('the-file').addEventListener('change', function (e) {
        var fileName = document.getElementById("the-file").files[0].name;
        var nextSibling = e.target.nextElementSibling
         nextSibling.innerText = fileName
     }); 
  </script>

}

您可以参考输入以了解更多详细信息

为什么会出现上述错误

fiddle中的代码与OP不同。我将以fiddle中的代码为例

首先，请注意，您添加了bootstrp.min.js引用，但是没有为其添加jquery。因为bootstrap.min.js依赖于jquery，所以它在定义handleFile函数之前抛出

这就是为什么我们可以在控制台中看到util.js:56 Uncaught TypeError的错误：无法读取util.js:56处未定义的属性'fn'。要解决该问题，请在bootstrap.min.js之前添加jquery.min.js：

或者更改js的加载行为，如：

然后通过以下方式将js语句与函数引用混淆：

<input id="the-file" type="file" name="name" onchange="this.handleFile" /> 

handleFile在运行时使用指向窗口的this。因此，它在被调用时抛出。由于我们已将文件作为参数传递，请按如下所示更改函数：

 function handleFile(files) {       
    console.log(files);         
}       

---

你能做一把小提琴吗？JSFIDLE添加了小提琴

 function handleFile(files) {       
    console.log(files);         
}