Question

问题是所选图片未显示

我一直在寻找关于stackoverflow的代码，并发现一个可以正常工作的2013，但是与该选项相比，它太大了。我尝试更改代码以使其正常运行，但是我的尝试没有成功。下面的示例。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body ng-app="myApp">

  <div ng-controller="myCtrl">

    <form name="upload" class="form" ng-submit="addFile()">
      <input type="file" name="file" ng-model="image" id="iconUplaod" multiple 
             onchange="angular.element(this).scope().uploadedFile(this)" />
      <button type="submit">Upload </button>
    </form>

    <img ng-src="{{iconPreviewUrl}}" alt=""/>

  </div>

<script>
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
    $scope.uploadedFile = function(element) {
        $scope.$apply(function($scope) {
            $scope.files = element.files;
            //icon preview
            var fileReader = new FileReader();         
            fileReader.readAsDataURL(document.getElementById("iconUplaod").files[0]);
            fileReader.onload = function (oFREvent) {
                $timeout(function(){
                    $scope.iconPreviewUrl = oFREvent.target.result;
                });
            };
       });
    }
}]);
</script>
</body>

下面的原始代码

<form name="upload" class="form" ng-submit="addFile()">
  <input type="file" name="file" id="iconUplaod" multiple 
 onchange="angular.element(this).scope().uploadedFile(this)" />
 <button type="submit">Upload </button>
</form>

<script>
$scope.uploadedFile = function(element) {
 $scope.$apply(function($scope) {
   $scope.files = element.files;
   //icon preview
   var fileReader = new FileReader();
   fileReader.readAsDataURL(document.getElementById("iconUplaod").files[0]);
   fileReader.onload = function (oFREvent) {
 $timeout(function(){
   $scope.iconPreviewUrl = oFREvent.target.result;
 });
   };
 });
}
</script>

您可以在任意位置显示此预览网址。

<img ng-src="{{iconPreviewUrl}}"/>

帮助使代码正常工作。我需要显示一张图片的预览

选择图片后显示预览图片

0 个答案: