javascript - 如何显示我使用指令上传到 Controller 的图片

Question

嗯，老实说，这是我第一次尝试在 JS 中使用图片上传。我正在处理一个 Angular 项目，该项目需要上传用户的图片并将其显示在页面上。 (非常像我们在 Facebook 上上传个人资料图片，唯一的区别是，此页面稍后将以 pdf 格式下载)。

我很失望地看到 ng-model 不适用于文件类型。我尝试了很多方法，最后制定了一个指令，将文件带到我的 Controller (从 here 获得帮助)。

现在我的 $scope.myPic 变量中有文件。我该如何使用这个文件。我该如何显示它。 。我尝试直接绑定(bind)变量{{myPic}}，但没有成功 。我尝试使用 (#id).value()。将其存储在变量和绑定(bind)中，但这不起作用。

我尝试过其他一些事情，但无法帮助自己。

有人可以提供将用户从系统上传的图像绑定(bind)到 Angular 的 HTML 页面中的方法吗？ 任何好的链接都将不胜感激......

仅供引用:

我的指令 fn:

function uploadPicFn($parse) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var model = $parse(attrs.picModel);
            var modelSetter = model.assign;

            element.bind('change', function(){
                scope.$apply(function(){
                    modelSetter(scope, element[0].files[0]);
                });
            });
        }
    };
};

我的html:

<div class="aw_textarea">
         <label>That's me:{{home.myPic}}</label></br>
         <input class="pd_txtarea" type="file" pic-model="home.myPic"/>
    </div>

Answer 1

例如，可以使用 File Reader 来完成此操作。

您提到您从 here 获得了帮助。因此，我用非常基本的代码示例更新了那篇文章中的 jsfiddle，说明如何使用 FileReader。看看-jsfiddle

        link: function(scope, element, attrs) {
          var model = $parse(attrs.fileModel);
          var modelSetter = model.assign;
          var img = element.parent().children()[2];
          var reader = new FileReader();
          reader.onload = function (e) {
            angular.element(img).attr('src', e.target.result);
          }

          element.bind('change', function(){
            scope.$apply(function(){
                modelSetter(scope, element[0].files[0]);
            });
            reader.readAsDataURL(element[0].files[0]);
        });
    }