Laravel - javascript 在 @section 刀片內不起作用（文件輸入）

Question

我正在研究 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>

進口-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 有關嗎？

謝謝！

Answer 1

在執行之前嘗試等待文檔准備好 state 和 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;
}

Laravel - javascript 在 @section 刀片內不起作用（文件輸入）

問題描述

1 個解決方案

解決方案1
0 2020-06-08 16:46:30

Laravel - javascript 在 @section 刀片內不起作用（文件輸入）

問題描述

1 個解決方案

解決方案1 0 2020-06-08 16:46:30

解決方案1
0 2020-06-08 16:46:30