指令 demo
指令的demo，最大上限九张，便使用了九个指令分别控制相对应的html，之所以这样做是因为我们的后台要求每次都传过来九个文件，那么每一个指令的差异就在于‘ scope.sendObj.append('file1', file);’中的名不同第二个scope.sendObj.append('file2', file)以此类推，
app.directive('uploadImage1', function () {
return {
link: function (scope, elem) {
elem.on("change", function () {
var file = this.files[0];
if (!/image/w+/.test(file.type)) {
;
return false;
//判断所选文件类型是否为图片
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
elem.parent().css({
'backgroundImage': 'url(' + this.result + ')',
'backgroundSize': '100%'
});
elem.parent().next().show();
//页面效果为初始化完成只有第一个显示，点击当前选择图片后，下一个显示
scope.$apply();
};
scope.sendObj.append('file1', file);
});
}
}
});
相关controller demo
小编已经把相关的逻辑demo祛除这里就不太多的解释了，
$scope.sendObj = new FormData();
$scope.sendAll = function () {
$scope.sendObj.append('file1', '');
$scope.sendObj.append('file2', '');
$scope.sendObj.append('file3', '');
$scope.sendObj.append('file4', '');
$scope.sendObj.append('file5', '');
$scope.sendObj.append('file6', '');
$scope.sendObj.append('file7', '');
$scope.sendObj.append('file8', '');
$scope.sendObj.append('file9', '');
$http({
method: 'POST',
url: "路径",
data: $scope.sendObj,//上传数据
headers: {'Content-Type': undefined},
transformRequest: angular.identity
}).success(function (response) {
//上传成功的操作
if (response.code == 200) {
;
}
});
};