Laravel-javascript不'；t在@section blade内工作（文件输入）

我在做一个拉威尔的项目。我有一个用于加载文件的输入，我基本上是在加载文件时（发送表单之前）尝试显示文件名

我正在使用这个例子，它本身运行良好，但不在我的laravel视图中

这些是我的文件：

appHome.blade.php（基本布局）

...
...
@产量（‘含量’）
...
var input=document.getElementById（'file upload'）；
var infoArea=document.getElementById（'file upload filename'）；
addEventListener（'change'，showFileName）；
函数showFileName（事件）{
var输入=event.src元素；
var fileName=input.files[0]。名称；
infoArea.textContent='文件名：'+文件名；
}

导入form.blade.php

@extends('layouts.appHome')
@section('content')
   ...
   ...

   <form>
     <input type="file" id="file-upload" multiple required />
     <label for="file-upload">Upload file</label>
     <div id="file-upload-filename"></div>
   </form>

@endsection

@extends（'layouts.appHome'））
@节（“内容”）
...
...
上传文件
@端部

我尝试在js脚本中使用console.log，或者检查filename变量是否存在，并且所有的变量都可以工作，但是我认为当它将文件名添加到infoArea（infoArea.textContent）时，它就不能工作了

这与刀片截面/延伸或js有关吗

---

谢谢

在执行和javascript之前，请尝试等待文档就绪状态：

function ready(callbackFunc) {
  if (document.readyState !== 'loading') {
    // Document is already ready, call the callback directly
    callbackFunc();
  } else if (document.addEventListener) {
    // All modern browsers to register DOMContentLoaded
    document.addEventListener('DOMContentLoaded', callbackFunc);
  } else {
    // Old IE browsers
    document.attachEvent('onreadystatechange', function() {
      if (document.readyState === 'complete') {
        callbackFunc();
      }
    });
  }
}

ready(function() {
    var input = document.getElementById( 'file-upload' );
    var infoArea = document.getElementById( 'file-upload-filename' );
    input.addEventListener( 'change', showFileName );
});

function showFileName( event ) {
    var input = event.srcElement;
    var fileName = input.files[0].name;
    infoArea.textContent = 'File name: ' + fileName;
}

---

在执行和javascript之前，请尝试等待文档就绪状态：

function ready(callbackFunc) {
  if (document.readyState !== 'loading') {
    // Document is already ready, call the callback directly
    callbackFunc();
  } else if (document.addEventListener) {
    // All modern browsers to register DOMContentLoaded
    document.addEventListener('DOMContentLoaded', callbackFunc);
  } else {
    // Old IE browsers
    document.attachEvent('onreadystatechange', function() {
      if (document.readyState === 'complete') {
        callbackFunc();
      }
    });
  }
}

ready(function() {
    var input = document.getElementById( 'file-upload' );
    var infoArea = document.getElementById( 'file-upload-filename' );
    input.addEventListener( 'change', showFileName );
});

function showFileName( event ) {
    var input = event.srcElement;
    var fileName = input.files[0].name;
    infoArea.textContent = 'File name: ' + fileName;
}

---

只要

@yield（'content）

和

@section（'content'）@endsection

在您的

之前，那么它就可以了。您是否遇到任何类型的控制台错误？在浏览器中，按

F12

，或

CMD+SHIFT+I

（或Windows上的

CTRL

）并导航到控制台选项卡。您可以尝试使用此选项卡

或

我的控制台上没有错误，我尝试添加类型=“text/javascript”，但它不起作用。基本上不会调用“change”事件…只要

@yield（'content）

和

@section（'content'）@endsection

在您的

之前，那么它就可以了。您是否遇到任何类型的控制台错误？在浏览器中，按

F12

，或

CMD+SHIFT+I

（或Windows上的

CTRL

）并导航到控制台选项卡。您可以尝试使用此选项卡

或

我的控制台上没有错误，我尝试添加类型=“text/javascript”，但它不起作用。基本上，“更改”事件不会被调用…嗨，如果我尝试您的代码，我会得到以下错误：未捕获引用错误：infoArea未在HTMLInputElement.showFileName中定义Hi，如果我尝试您的代码，我会得到以下错误：未捕获引用错误：infoArea未在HTMLInputElement.showFileName中定义