在 Bootstrap 4 的文件上传选项中显示文件名 [重复]

Posted 2023-03-05

【中文标题】在 Bootstrap 4 的文件上传选项中显示文件名 [重复]

【英文标题】：Display file name in file upload option in Bootsrap 4 [duplicate]

【发布时间】：2020-03-31 02:07:09

【问题描述】：

我正在为我的页面使用 bootsrap 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>

以下是文件选择前和文件选择后的截图。

选择文件之前

选择文件后

谢谢， 卡西克

【问题讨论】：

你想显示一个文件名吗？当用户浏览图片时.....ryt?

但使用上面的代码文件名显示

【参考方案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>

【讨论】：

嘿，非常感谢...它的工作原理。

【参考方案2】：

下面是使用 bootstrap 4 的工作代码 sn-p，我想你忘了添加 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>

【参考方案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>