Как отобразить картинку, которую я загрузил в свой контроллер, используя мою директиву

0

Ну, честно говоря, это моя первая попытка работать с загрузкой pic в JS. Я работаю с проектом Angular, который должен загрузить изображение пользователя и отобразить его на странице. (Очень похоже, что мы загружаем наш профиль pic на facebook, только разница в том, что эта страница будет загружена в формате pdf позже).

Я был разочарован тем, что ng-model не работает с типом файла. Я пробовал много вещей, и, наконец, сделал директиву, которая приносит файл в мой контроллер (получили помощь от сюда).

Теперь, когда у меня есть файл в переменной $ scope.myPic. Как обойти этот файл. Как его отобразить. , Я попытался привязать переменную напрямую {{myPic}}, которая не сработала. Я попытался использовать (#id).value(). Хранение этого в переменной и привязке, что не сработало.

Есть другие пары вещей, которые я пробовал, но не мог помочь себе.

Может ли кто-то предоставить способ привязки изображения, загружаемого пользователями из своих систем на HTML-страницу в Angular. Любые хорошие ссылки более чем оценены...

FYI:

Моя директива 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 me:{{home.myPic}}</label></br>
         <input class="pd_txtarea" type="file" pic-model="home.myPic"/>
    </div>
  • 0
    Вы загружаете свои фотографии куда-нибудь?
  • 0
    Где-то вроде ?? Теперь все, что у меня есть, это файл pic в моей переменной контроллера ..
Показать ещё 1 комментарий
Теги:
image
image-uploading

1 ответ

1
Лучший ответ

Это можно сделать, например, с помощью File Reader.

Вы упомянули, что получили помощь отсюда. Поэтому я обновил 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]);
        });
    }
  • 0
    Пятно на !!! .. Хотя вопрос немного. Во-первых, так как я не знаю много о File Reader. Можете ли вы объяснить, что здесь происходит? Любая ссылка будет в порядке. Во-вторых, я вижу, вы также написали код для почтового запроса. Поскольку мне это не нужно (поскольку эта страница будет напрямую загружена в формате PDF), я предполагаю, что могу пропустить эту часть вашего кода?
  • 0
    О, только что увидел, что вы предоставили ссылку на File Reader уже ...
Показать ещё 6 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню