angularjs从输入中获取值并应用于span答案

【问题标题】：angularjs get value from input and apply to spanangularjs从输入中获取值并应用于span
【发布时间】：2018-03-01 13:18:10
【问题描述】：

我正在尝试创建一个上传按钮。

HTML

<div class="parent">
  <input id="uploadFile" type="file" ng-model="uploadFile">
  <div class="child">
  <span>select a file</span>
  </div>
</div>

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

function MyCtrl($scope) {
    $scope.$watch('uploadFile', function(val) {
        if (val) {
            console.log(val);
        }
    });
}

所以我通过在 CSS 中添加一些不透明度来隐藏默认输入类型文件，我需要从输入类型文件中获取值并将跨度值替换为输入中的值，还需要一个“x”关闭按钮这将删除跨度和输入值。

FIDDLE:

【问题讨论】：

get source and name of selected file with angularjs的可能重复

标签： javascript angularjs file-upload

【解决方案1】：

无需编写任何 JS 代码，它的 Angular，只需稍微更改您的 HTML：

<div class="parent">
  <input id="uploadFile" type="file" ng-model="uploadFile">
  <div class="child">
  <span ng-bind="uploadFile">select a file</span>
  </div>
</div>

<span ng-bind="uploadFile">select a file</span>

【讨论】：

将ng-controller="MyCtrl" 添加到您的 div 中，一切都会正常运行：您的解决方案和 Syed 中写得更好的解决方案
@Genu 是，但仍然无法正常工作，请在小提琴中检查
@SyedAmirHussain 它是但不起作用，我认为使用 ng-binding 的解决方案不太准确
你的 Fiddle 通过添加 ng-controller 来工作。它在控制台中打印文件名。我了解您想要更多功能，但请修复您的初始帖子，答案将集中在提供此功能的解决方案上。
@Genu 这不是真的，因为生成的窗口是一个系统窗口，jsfiddle 会帮助你，但如果你把它放在一个工作项目中将不起作用

【解决方案2】：

我想你想显示你刚刚上传的图片，如果是，请使用下面的代码：

HTML：

<div class="parent">
  <input id="uploadFile" type="file">
  <div class="child">
  <span class="choose_file">select a file</span>
  </div>
</div>

JS：

    angular.element('.choose_file').click(function(){
        angular.element('#uploadFile').trigger('click');
    });
    angular.element('#uploadFile').change(function(){
        readFile(this);
    });
    var readFile = function(obj) {
        if(obj.files && obj.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
        angular.element('.'+angular.element(obj).attr('name')).html('<img src="'+e.target.result+'" height="50" />');
            }
            reader.readAsDataURL(obj.files[0]);
        }
    }

【讨论】：

它现在是有角度的。