Question

我正在使用zurb基金会和他们的按钮上传文件，该文件隐藏了上传文件的名称。我想展示一下，所以我使用了建议的解决方案here：

(function() {

  // Attach the change event listener to change the label of input[type=file] element
  var input = document.querySelector("input[type=file]");
  console.log(input);

  input.addEventListener("change", function() {
    var label = this.previousElementSibling;
    console.log(label);
    label.innerHTML = this.files[0].name;
  });

})();

<form role="form" method="POST" action="{{ url('/admin/upload') }}" enctype="multipart/form-data">
  <input type="hidden" name="_token" value="{{ csrf_token() }}"> Hent fil (CSV format): <br>
  <label for="csvFile" class="button">Upload File</label>
  <input type="file" id="csvFile" name="csvFile" class="show-for-sr">
  <p><input type="submit" class="hollow button" value="Last opp" /></p>
</form>

这是在浏览器中创建的html：

<form role="form" method="POST" action="http://admin/upload" enctype="multipart/form-data">
  <input type="hidden" name="_token" value="MeCNU58hUdEfsi8SmfP9OGlmW0wpb1WGeC9jEJGe">
   Hent fil (CSV format): <br> 
  <label for="csvFile" class="button">Upload File</label> 
  <input type="file" id="csvFile" name="csvFile" class="show-for-sr">
  <p><input type="submit" value="Last opp" class="hollow button"></p>
</form>

在页面加载时，我进入console.log(input);的控制台输入字段，但在上传文件时没有任何反应，我在console.log(label)的控制台中没有得到任何内容。

我的项目是使用Laravel框架构建的。我在页面上有一个主要脚本：

<script src="{{ asset('js/app.js') }}"></script>

在那个脚本中，我需要所有其他脚本，现在只是上面显示的脚本和一个引导脚本：

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */
require('./bootstrap');
require('./fileUpload');
/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('example', require('./components/Example.vue'));

const app = new Vue({
    el: '#app'
});

bootstrap.js看起来像这样：

window._ = require('lodash');

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

window.$ = window.jQuery = require('jquery');

require('bootstrap-sass');

/**
 * Vue is a modern JavaScript library for building interactive web interfaces
 * using reactive data binding and reusable components. Vue's API is clean
 * and simple, leaving you to focus on building your next great project.
 */

window.Vue = require('vue');

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common = {
    'X-CSRF-TOKEN': window.Laravel.csrfToken,
    'X-Requested-With': 'XMLHttpRequest'
};

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

// import Echo from 'laravel-echo'

// window.Pusher = require('pusher-js');

// window.Echo = new Echo({
//     broadcaster: 'pusher',
//     key: 'your-pusher-key'
// });

当我没有使用基础类上传按钮时它似乎有用，当它只是默认的上传按钮时：

<input type="file" id="csvFile" name="csvFile" class="button"><br>

不确定，基金会阻止了什么？

Javascript - 事件监听器无法正常工作

0 个答案: