我想通过触发另一个元素上传图片预览， 所以我把指令放在一起。
https://stackoverflow.com/a/25674293
AngularJS Image Preview before Upload showing previous image selected
这对我来说太混乱了。如何通过点击图片制作指令图片预览上传？ 我试着把它放在一起但它失败了，
https://jsfiddle.net/tictac18g/83m659zL/4/
.directive('fileButton', function ($parse) {
return {
restrict: 'AE',
link: function (scope, element, attrs) {
scope.setimage = function () {
var file = scope.myFile;
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
scope.$apply(function () {
scope.ImageSrc = e.target.result;
})
}
}
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;
element.bind('change', function (e) {
scope.$apply(function (e) {
modelSetter(scope, element[0].files[0]);
});
scope.setimage();
});
},
compile: function (element) {
var fileInput = angular.element('<input type="file" file-model="myFile" multiple />')
fileInput.css({
position: 'absolute',
top: 0,
left: 0,
'z-index': '2',
width: '100%',
height: '100%',
opacity: '0',
cursor: 'pointer'
});
element.append(fileInput)
return this.link;
}
}
})
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-init="ImageSrc ='https://www.google.com/images/srpr/logo3w.png'" file-button>
<img width="200" ng-src="{{ImageSrc}}" />
</div>
</div>
提前致谢。
更新 我已经把两个单独的指令，似乎工作，但我不能弄清楚做出一个指令。
这是我的结果，https://jsfiddle.net/tictac18g/4y0seej9/
但结果与我正在寻找的不符，因为上传图片的大小无法克制。
与jquery http://jsfiddle.net/rodolphobrock/q8f33f8L/
的结果不完全相同 你会给我一些建议，它不能在angularjs中实现相同的功能吗？更新2： 我无法使用本机指令，因此我已将其应用于JQuery插件。