Question

有人可以告诉我为什么这段代码不起作用？这是我的预览区域：
<div class="preview"><img src="" alt=""></div>

这是我的input：

<input type="file" file-input>

并遵循我的指令代码：

    var cmos = angular.module('cmos', ['simditor']);
    // controller
    cmos.controller('cmosCtrl', function( $scope ){}
    // directive
    cmos.directive("fileInput", function( $parse ){
            return{
                link: function($scope, element, attrs){
                    element.on('change', function(event){
                        var files = event.target.files;             

                        var reader = new FileReader();

                        var img = document.querySelector(".preview > img");
                        reader.addEventListener("load", function(){
                            img.src = reader.result;
                        }, false);

                        if(files){
                            reader.readAsDataURL(files[0]);                 
                        }
                        // console.log(files[0]);
                    });
                }
            }   
    });

当我在input上插入图片时，想要拍摄图像并将其显示在预览区域。

Answer 1

你可以像这样使用$ scope ..

<div class="preview"><img src="{{imageUrl}}" alt=""></div>

和js。

var files = event.target.files;
                    var reader = new FileReader();

                    reader.addEventListener("load", function(){
                        $scope.imageUrl = reader.result;
                    }, false);

                    if(files){
                        reader.readAsDataURL(files[0]);                 
                    }

AngularJS文件输入的简单图像预览

1 个答案: