AngularJS图像输入获取DataURL

Question

我在网站中使用AngularJS，并且在网站上是一个允许用户从其本地文件系统中选择图像的表单，然后希望从该图像中获取dataurl。我正在寻找一种方法，以最简单的方式做到这一点。然后我想在网页上的某个地方显示该图像。任何帮助都会很棒。

Answer 1

你可以使用以下指令https://github.com/danialfarid/ng-file-upload来做，有很好的例子。

Answer 2

            <input id="backgroundImageUpload" type="file" onchange="previewFile()">
            <br>
            <img id="backgroundImagebleh" src="" height="200" alt="Image preview...">

            <script>
                function previewFile() {
                    var preview = document.querySelector('#backgroundImagebleh');
                    var file = document.querySelector('#backgroundImageUpload').files[0];
                    var reader = new FileReader();

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

                    if (file) {
                        reader.readAsDataURL(file);
                    }
                }