如何在选择文件按钮上显示完整的文件名答案

【问题标题】：how to display complete file name on choose file button如何在选择文件按钮上显示完整的文件名
【发布时间】：2019-01-02 09:50:45
【问题描述】：

我需要在“选择文件”按钮旁边显示完整的文件名。问题是如果文件名太长，则不显示。如何显示完整的文件名？

例如：如果我选择的文件名是 Spring4MVCFileUploadCommonsExample.zip，那么在选择文件后，它会显示名称为 Spring4MVC....mple.zip

如果我尝试增加宽度，引导面板元素也会展开。

<!doctype html>
<html >
  <head>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>        
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular-resource.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular-route.min.js"> </script>
      <script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>
      <script src="https://cdn.firebase.com/libs/angularfire/0.9.0/angularfire.min.js"></script>
      <script src="js/app.js"></script>
      <script src="js/uploadAttachementFiles.controller.js"></script>
      <script src="js/uploadAttachementComponent.js"></script>
      <link rel="stylesheet" href="css/uploadAttachementfiles.css">
	  <!-- <style>
		.panel-body{
				display: grid; 
			}
	  </style> -->
  </head>
  <body ng-app="mkpApp" ng-controller="mkpUploadController as vm">   
   
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">
  <div class="form-group row">
    <label for="desc" class="col-xs-4 col-md-3 col-form-label">Description:</label>
    <div class="col-xs-8 col-md-9">
      <textarea class="btn-block" rows="3" cols="5" maxlength="255" id="desc" style="resize: none;"></textarea>
    </div>
  </div>
  <div class="form-group row">
    <label for="uplodedFiles" class="col-xs-4 col-md-3 col-form-label">Uploded Files:*</label>
    <div class="col-xs-8 col-md-9">
      <div class="panel panel-default">
        <div class="panel-heading">Location</div>
        <div class="panel-body">
          <div ng-repeat="file in vm.files">
            <div class="clearfix">
              <button type="button" class="btn btn-xs pull-left" style="margin-right: 10px" ng-hide="myValue" ng-click="Remove($index)">
                <span class="glyphicon glyphicon-remove-sign"></span>
              </button>
              <input type="file" value="{{vm.Name}}" id="fg" class="pull-left" />
            </div>
            <hr />
          </div>
          <div class="form-group">
            <span class="glyphicon glyphicon-plus-sign" ng-click="Add()"></span>
            <input type="button" ng-click="Add()" value="Add" ng-model="Name" />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
	<script>
		var mkpApp = angular.module('mkpApp', []);
		mkpApp.controller('mkpUploadController', ['$scope', function($scope,$window) {
			var file = {};
			$scope.vm.files = [file

			];
			$scope.Add = function(){
				//Add new item to Array
				var file = {};
				file.Name = $scope.Name;
				$scope.vm.files.push(file);
				//Clear Text boxes
				$scope.Name = "";
				console.log(file);
			};
			$scope.Remove = function(index){
				//Find the record From Array Using index
				{
					//Remove Item from Array using index
					$scope.vm.files.splice(index,1);
					console.log(index,1);
				}
			}   
		}]);
	</script>
  </body>
</html>

【问题讨论】：

您无法控制 HTML 控件的默认行为，但您可以从文件输入的值中获取名称。你试过这个吗？ $('#fg').on('change', function() { // 获取文件路径 var filePath = $(this).val(); // 输出到单独元素的路径 $('myDiv') .html(filePath); });
当询问由代码引起的问题时，如果您使用尽可能少的代码但仍会产生同样的问题，您将得到更好的答案。见How to create a Minimal, Complete, and Verifiable example。

标签： javascript html css angularjs twitter-bootstrap

【解决方案1】：

检查此技术它可能会对您有所帮助。

$("[type=file]").on("change", function(){
  var file = this.files[0].name;
  var placeholder = $(this).attr("placeholder");
  if($(this).val()!=""){
    $(this).next().text(file);
  } else {
    $(this).next().text(placeholder);
  }
});

body {
  padding: 5em;
}
label, input {
  color: #333;
  font: 14px/20px Arial;
}
label {
  display: inline-block;
  width: 5em;
  padding: 0 1em;
  text-align: right;
}
[type=file] {
    position: absolute;
    filter: alpha(opacity=0);
    opacity: 0;
}
input,
[type=file] + label {
  border: 1px solid #CCC;
  border-radius: 3px;
  text-align: left;
  padding: 10px;
  width: 150px;
  margin: 0;
  left: 0;
  position: relative;
}
[type=file] + label {
  text-align: center;
  left: 7.35em;
  top: 0.5em;
  background: #333;
  color: #fff;
  border: none;
  cursor: pointer;
}
[type=file] + label:hover {
  background: #75397c;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input id="file" type="file" placeholder="Chosse File" />
  <label for="file">Choose File</label>
</form>

【讨论】：

【解决方案2】：

有一个使用 javascript 的解决方法

HTML 代码：

 <form>
  <input type="file" id="upload-file"/>
  <label for="upload-file">Upload file</label>
  <div id="file-name"></div>
</form>

CSS（删除默认行为）：

#upload-file {
  position: absolute; 
  z-index: -1;
  opacity: 0;
}

最后是 java-script 代码：

var input = document.getElementById( 'upload-file' );
var fileNameDiv= document.getElementById( 'file-name' );

input.addEventListener( 'change', showFileName );

function showFileName( event ) {
  var input = event.target;

  // get file name
  var fileName = input.files[0].name;
  fileNameDiv.textContent = fileName;
}

【讨论】：