3

I'm trying to show a photo when someone selects it for an input. Now I might be over simplyfying angularjs too much but I was hoping that this code would work.

    <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

Where my angularjs file is as follows

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

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

clientDashboard.controller('imgCtrl',imgCtrl);

Unfortunately, nothing is happening and I can't see my updated image. Do I really have to write boiler plate code for this?

4

1 に答える 1

2

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ファイル入力フィールドに適用されるかどうかわかりません

于 2013-10-17T23:36:13.080 に答える