Question

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

HTML

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

JS

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

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

所以我通过在CSS中添加一些不透明度来隐藏默认输入类型文件，我需要的是从输入类型文件中取值并用输入中的值替换span值，还需要＆＃34; x＆＃34;关闭按钮，将删除范围和输入值。

FIDDLE:

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

Answer 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]);
        }
    }

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

2 个答案: