Question

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

我很失望地看到ng-model不适用于文件类型。我尝试了很多东西，最后制定了一个指令，将文件传送给我的控制器（得到了here的帮助。）

现在我的$ scope.myPic变量中有文件。我该如何使用此文件。我该如何显示它。。我尝试直接绑定变量{{myPic}}，这不起作用。我尝试使用（#id）.value（）。将它存储在变量和绑定中，这不起作用。

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

有人可以提供将用户从其系统上传的图像绑定到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]);
        });
    }

如何使用我的指令显示我上传到控制器的图片

1 个答案: