Laravel - javascript 在@section 刀片中不起作用（文件输入）答案

【问题标题】：Laravel - javascript doesn't work inside @section blade (file input)Laravel - javascript 在@section 刀片中不起作用（文件输入）
【发布时间】：2020-09-27 16:28:34
【问题描述】：

我正在做一个 Laravel 项目。我有一个加载文件的输入，我基本上是在加载文件时（在发送表单之前）显示文件名。

我正在使用这个示例 https://codepen.io/hidde/pen/LyLmrG，它本身运行良好，但不在我的 laravel 视图中。

这些是我的文件：

appHome.blade.php （基本布局）

<html>
...

<body class="font-body" >
     ...

     @yield('content')

     ...

    <script>
     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;
        }
    </script>

</body>
</html>

import-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

我尝试在 js 脚本中 console.log 或检查文件名变量是否存在并且一切正常，但我认为将文件名添加到 infoArea (infoArea.textContent) 时它不起作用。

这与刀片部分/扩展或 js 有关吗？

谢谢！

【问题讨论】：

只要@yield('content) 和@section('content') ... @endsection 在你的<script> 之前就可以了。您是否收到任何类型的控制台错误？在您的浏览器中，按F12 或CMD + SHIFT + I（或Windows 上的CTRL）并导航到“控制台”选项卡
你试试这个<script type="text/javascript"> 或<script language="javascript">
我的控制台上没有错误，我尝试添加该 type="text/javascript" 但它不起作用。基本上不会调用“更改”事件...

标签： javascript laravel file input laravel-blade

【解决方案1】：

在执行和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;
}

【讨论】：

嗨，如果我尝试您的代码，我会收到以下错误：未捕获的 ReferenceError: infoArea is not defined at HTMLInputElement.showFileName