/**
自定义上传图片
*/
app.directive('uploadImage', function() {
return {
restrict : 'AE',
templateUrl : 'component/upload/upload-img.html',
replace : true,
scope : {
upLoadCover : "@",
url : "=url"
},
link : function(scope, element, attrs)
{
scope.upLoadCover = consts.DEFAULT_UP_IMAGE;
scope.imgUpload = function(files)
{
$progress.show("图片正在上传中...");
var reader = new FileReader();
reader.readAsDataURL(files[0]);
reader.onload = function(evt)
{
scope.$apply(function(){
scope.upLoadCover = evt.target.result;
});
}
var xhr = new XMLHttpRequest();
var data = new FormData();
data.append("file", files[0]);
xhr.open("post",api.API_UPLOAD,true);
xhr.send(data);
xhr.onload = function (){
var tex = xhr.responseText;
var dataUrl = JSON.parse(tex).data.file[0].url;
scope.$apply(function(){
scope.url = dataUrl;
$progress.hide();
});
};
}
}
};
});
自定义控件的Template
<form method="post" enctype="multipart/form-data" action="">
<div class="add-up-load-img">
<i class="cover" style="background-image: url({{upLoadCover}});"></i>
</div>
<div class="add-up-load-btn">
<img src="assets/images/public/plus.png" />
<input type="file" name="file" onchange="angular.element(this).scope().imgUpload(this.files)"/>
</div>
</form>
代码中scope.upLoadCover = consts.DEFAULT_UP_IMAGE;
这一句是给自定义控件附一个默认背景,上传后替换默认背景,如图
但是点击修改图片时,要给图片赋值,如何做到呢?