Javascript 引导上载

我有一个文件上传，我正试图在引导布局。我有以下代码：

 <form action="{{route('admin_auctions_images', ['id' => $auction_id])}}" method="post" enctype="multipart/form-data">
   <input type="hidden" name="_token" value="{{{ csrf_token() }}}" />
      <div class="input-group">
         <span class="input-group-btn">
            <span class="btn btn-primary btn-file">
                 Browse;
              <input type="file" name="filefield" single>
            </span>
         </span>
         <input type="text" class="form-control" readonly>
       </div>
       <button class="btn btn-primary type="submit">Upload image</button>
  </form>

以及以下JS文件：

$(document).on('change', '.btn-file :file', function() {
  var input = $(this),
      numFiles = input.get(0).files ? input.get(0).files.length : 1,
      label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
  input.trigger('fileselect', [numFiles, label]);
});

$(document).ready( function() {
    $('.btn-file :file').on('fileselect', function(event, numFiles, label) {

        var input = $(this).parents('.input-group').find(':text'),
            log = numFiles > 1 ? numFiles + ' files selected' : label;

        if( input.length ) {
            input.val(log);
        } else {
            if( log ) alert(log);
        }

    });
});

问题是，一旦我选择了文件（用于上载），它就不会显示在文本框中。我希望它显示所选的文件

我通过gulpfile.js（Elixir）添加了css和js文件。它编译正确。jsiddle文件是

注意：当我从gulpfile.js中注释掉css和js文件，并将表单更改为下面的格式，然后再次运行gulp时，它可以工作（尽管没有应用引导文件）。见截图

<form action="{{route('admin_auctions_images', ['id' => $auction_id])}}" method="post" enctype="multipart/form-data">
    <input type="hidden" name="_token" value="{{{ csrf_token() }}}" />
    Browse
    <input type="file" name="filefield" single>
    <div>
        <button class="btn btn-primary type="submit">Upload image</button>
    </div>
</form>

浏览
是否确保布局文件包含该布局文件并正确呈现包含文件的路径？您可以将刀片视图和呈现的html发布到创建一个演示中，该演示在JSFIDLE或其他js沙盒中复制。需要确保事件甚至被触发。你还没有提供任何关于that@alariva把这个放进垃圾箱有什么好处？如果没有包含视图，那么当按钮不存在时，你不认为这对OP来说是显而易见的吗？你能尝试一下
input:file
和
input:text
@charlietfl:用一些屏幕截图和JSFIDLE更新了原始帖子（这个工具对我来说太简单了）。是否确保布局文件包含该布局文件并正确呈现包含文件的路径？您可以将刀片视图和呈现的html发布到创建一个演示中，该演示在JSFIDLE或其他js沙盒中复制。需要确保事件甚至被触发。你还没有提供任何关于that@alariva把这个放进垃圾箱有什么好处？如果没有包含视图，那么当按钮不存在时，你不认为这对OP来说是显而易见的吗？你能试着做
input:file
和
input:text
@charlietfl:用一些屏幕截图和JSFIDLE更新了原始帖子（这个工具对我来说太简单了）。
<form action="{{route('admin_auctions_images', ['id' => $auction_id])}}" method="post" enctype="multipart/form-data">
    <input type="hidden" name="_token" value="{{{ csrf_token() }}}" />
    Browse
    <input type="file" name="filefield" single>
    <div>
        <button class="btn btn-primary type="submit">Upload image</button>
    </div>
</form>