Question

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

例如：如果我选择的文件名为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>

Answer 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>

Answer 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脚本代码：

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;
}

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

2 个答案: