上传文件后，隐藏上传按钮旁边显示的上传文件名字符串

Question

我有一个允许用户上传jpg / mp4文件的表单，默认情况下，它会在“上传”文件旁边显示上传的文件名。按钮。

我试图阻止浏览器在“浏览/上传”旁边显示上传的文件名。按钮（我知道这非常愚蠢，但这是一个我需要更改的请求。）

<input id="file-upload" type="file" ngf-select="onFileSelect($files)" accept="image/*">

所以如果我上传一个名为＆＃39; soccer.mp4＆＃39;的文件 - 我不想要＆＃39; soccer.mp4＆＃39;出现在上传按钮旁边 - 是否有任何隐藏/删除它的简单方法？

Answer 1

不可能，因为没有DOM节点。您无法通过CSS或JavaScript更改它，但您可以使用由简单指令创建的按钮替换它 - 就像我在此demo fiddle中创建的那样。

视图

<div ng-controller="MyCtrl">
  <input type="file" name="myFile" id="myUpload" accept="/image" styled-upload-button />
</div>

AngularJS应用程序

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function ($scope) {
    $scope.name = 'Superhero';
}).directive('styledUploadButton', function ($compile ) {
  return {
    link: function(scope, element, attrs) {
      var el = $compile( '<button onclick="document.getElementById(\''+ attrs.id +'\').click()">Upload</button>' )( scope );
      element.parent().append(el);
      element.css('display', 'none');
    }
  };
});