javascript - Laravel - javascript 在@section 刀片中不起作用(文件输入)
问题描述
我正在做一个 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 有关吗?
谢谢!
解决方案
在执行和 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;
}
推荐阅读
- c# - “System.Data.SqlClient.SqlException”:关键字“CREATE”附近的语法不正确
- import - python用户界面,thony和pycharm中的导入错误
- c# - Winforms 中的 Parasolid 查看器
- html - 悬停文本的 CSS 垂直对齐
- julia - 有没有办法一次减去多个数据框列?
- django - 当我使用 for 循环遍历它时,我的 django 表单不起作用
- javascript - 如何获得空输入字段的计数?
- linux - 如何从linux的不同目录中提取同名文件?
- javascript - 如何在纯Javascript而不是jQuery中将类添加到具有ul子元素的li元素
- java - 为什么我不能在 @Mapping 属性中引用 @Context 参数?