html5-angular多个图片同时上传

html5多个图片同时上传相关逻辑

html demo

本文模拟发朋友圈的图片上传，这个功能是我项目中的一个实例分享给大家，下面是html demo因为我使用的是angular所以‘’upload-image1‘’表示的都是angular中的指令 ，至于一些样式那就是小伙伴们自由发挥了

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

//result.innerHTML = ' '

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

;

}

});

};

页面效果（此效果为页面一部分）