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

Question

嗯，老实说，这是我第一次尝试在 JS 中上传图片。我正在处理一个 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. So I updated jsfiddle from that article with very basic code example of how FileReader can be used. Take a look - 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]);
        });
    }

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

How to display a pic that I uploaded to my controller using my directive

javascript

image

image-uploading

angularjs