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

【问题标题】：Hide the uploaded filename string after file uploaded that appears next to the upload button在上传按钮旁边显示的文件上传后隐藏上传的文件名字符串
【发布时间】：2017-08-03 09:55:37
【问题描述】：

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

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

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

所以如果我上传一个名为“soccer.mp4”的文件——我不希望“soccer.mp4”这个词出现在上传按钮旁边——有什么简单的方法可以隐藏/删除它吗？

【问题讨论】：

标签： angularjs file-upload

【解决方案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');
    }
  };
});

【讨论】：