Ну, честно говоря, это моя первая попытка работать с загрузкой 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>
Это можно сделать, например, с помощью 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]);
});
}