图片上传

指令 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) {

;

}

});

};