Question

我正在尝试在有人选择输入时显示照片。现在我可能会过度简单地使用angularjs，但我希望这段代码可以正常工作。

    <div ng-app="app">

    ... html stuff ...

    <div ng-controller="imgCtrl">

    <input ng-model="imageSource" type="file"></input>   
    <img ng-src="{|imageSource|}"></img>

    </div>

    </div> end of app

我的angularjs文件如下所示

var app = angular.module('app',[]).config(function($interpolateProvider){
        $interpolateProvider.startSymbol('{|');
        $interpolateProvider.endSymbol('|}');
    }
);

var imgCtrl = function ($scope,$http){
    $scope.wall = _wall;
};

clientDashboard.controller('imgCtrl',imgCtrl);

不幸的是，什么也没发生，我看不到我的更新图像。我真的必须为此写锅炉板代码吗？

Answer 1

我使用chrome和firefox工作但是我的快速研究表明它存在安全风险，甚至可能最终都不允许。见这里：http://jsfiddle.net/28ZJw/

HTML：

<div ng-app="app">
  <div ng-controller="imgCtrl">
    <input ng-model="imageSource" type="file" onchange="angular.element(this).scope().fileNameChaged(this)"></input>
    <img ng-src="{|imageSource|}"></img>
  </div>
</div>

JS：

var app = angular.module('app',[]).config(function($interpolateProvider){
        $interpolateProvider.startSymbol('{|');
        $interpolateProvider.endSymbol('|}');
    }
);

app.controller('imgCtrl', function($scope, $http)
{
    $scope.imageSource = "";
    $scope.fileNameChaged = function(element)
    {
        var reader = new FileReader();
        reader.onload = function(e)
        {
            $scope.$apply(function()
            {
                $scope.imageSource = e.target.result;
            });
        }
        reader.readAsDataURL(element.files[0]);
    }
});

正确的方法是使用ng-change来实现这一目标但是我无法让它发挥作用。我不确定ng-change是否适用于文件输入字段

更新输入src上的图像更改angularjs

1 个答案: