在引导文件4中的文件上传选项中显示文件名

Question

我正在使用引导4作为我的页面。我有文件上传选项，用户首先选择一个文件。但是，当用户选择一个文件时，文件的名称将不会显示。在普通html中，默认情况下会发生这种情况。请看我的代码和屏幕截图，让我知道什么是必须做的。

<form method="post" action="upload_sub_fasta.php" enctype="multipart/form-data">
            <div class="input-group mb-3">
                    <div class="custom-file">
                            <input type="file" name="file" class="custom-file-input" id="validatedCustomFile" required>
                            <label class="custom-file-label" for="validatedCustomFile">Choose query</label>
                    </div>
                            <button type="submit" name="submit" class="btn btn-primary">Upload</button>
            </div>

    </form>

下面是选择文件之前和文件之后的屏幕截图。

选择文件之前的，

​

​

选择文件后的，

​

​

谢谢你，卡特式

Answer 1

请将这些脚本添加到代码中

​

'use strict';

;( function ( document, window, index )
{
	var inputs = document.querySelectorAll( '.custom-file-input' );
	Array.prototype.forEach.call( inputs, function( input )
	{
		var label	 = input.nextElementSibling,
			labelVal = label.innerHTML;

		input.addEventListener( 'change', function( e )
		{
			var fileName = '';
			if( this.files && this.files.length > 1 )
				fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
			else
				fileName = e.target.value.split( '\\' ).pop();

			if( fileName )
				label.innerHTML = fileName;
			else
				label.innerHTML = labelVal;
		});

		// Firefox bug fix
		input.addEventListener( 'focus', function(){ input.classList.add( 'has-focus' ); });
		input.addEventListener( 'blur', function(){ input.classList.remove( 'has-focus' ); });
	});
}( document, window, 0 ));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<form method="post" action="upload_sub_fasta.php" enctype="multipart/form-data">
            <div class="input-group mb-3">
                    <div class="custom-file">
                            <input type="file" name="file" class="custom-file-input" id="validatedCustomFile" required>
                            <label class="custom-file-label" for="validatedCustomFile">Choose query</label>
                    </div>
                            <button type="submit" name="submit" class="btn btn-primary">Upload</button>
            </div>            

    </form>

​

Answer 2

下面是使用引导程序4的工作代码片段，我想您忘记添加Javascript代码了。试试这个，我希望它能帮到你。谢谢

​

$(".custom-file-input").on("change", function() {
  var fileName = $(this).val().split("\\").pop();
  $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile" name="filename">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

​

Answer 3

您可以使用css样式尝试以下代码：

​

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
  </div>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile01"
      aria-describedby="inputGroupFileAddon01">
    <label class="custom-file-label" for="inputGroupFile01"></label>
  </div>
</div>

​