angularjs中使用 <input type="file">标签实现一次最多上传5张图片
前期准备：
1.angular.js
2.bootstrap.css
具体如何实现呢？请看下面代码哈哈哈。
在angular项目中，如果要给<input type="file">标签添加 onchange 事件，已：onchange="angular.element(this).scope().setImagePreviews()" 方式添加。
html：
<body ng-controller="main"> <div class=upload-file-content> <div class="row"> <div class="col-md-3"> <label>资质证照</label> </div> <div class="col-md-9"> <div class="show-img" ng-show="imgArrs.length>0"> <img ng-repeat="imgEle in imgArrs" ng-src="{{imgEle.src}}" class="yz inbuy"> </div> </div> </div> <div class="row" ng-show="customerData.errorMsg.logo"> <div class="col-md-3"></div> <div class="col-md-9 error-msg" ng-bind="customerData.errorMsg.logo"></div> </div> <div class="row"> <div class="col-md-3"></div> <div class="col-md-9"> <input class="upload-file-img" type="file" name="file" id="personsFile" multiple="multiple" accept="image/*" onchange="angular.element(this).scope().setImagePreviews()"> </div> </div> </div> </body>
css代码：
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"> <style type="text/css"> .upload-file-content { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 400px; width: 600px; font-size: 16px; } .yz.inbuy { width: 100px; height: 100px; } .error-msg { color: red; } </style>
js代码：
<script src="js/angular.js" charset="utf-8"></script>
<script type="text/javascript">
let mod = angular.module("test", []);
mod.controller("main", ['$scope', function($scope) {
$scope.customerData = {
errorMsg: {
logo: ''
}
}
// 上传图片
$scope.setImagePreviews = function() {
if (!personsFile.files[0]) {
return;
} else if (personsFile.files.length > 5) {
$scope.customerData.errorMsg.logo = "上传图片数量超出范围!";
$scope.$apply();
return;
}
$scope.customerData.errorMsg.logo = "";
$scope.imgArrs = [];
var uploadFiles = [];
for (var i = 0; i < personsFile.files.length; i++) {
var imgFile = personsFile.files[i];
if (imgFile.size / 1024 / 1024 > 10.0) {
$scope.customerData.errorMsg.logo = "上传图片大小不能超过10M";
$scope.imgArrs = [];
$scope.$apply();
return;
}
var _name, _fileName;
_name = imgFile.name;
_fileName = _name.substring(_name.lastIndexOf(".") + 1).toLowerCase();
if (_fileName !== "png" && _fileName !== "jpg") {
$scope.customerData.errorMsg.logo = "上传图片格式不正确，请重新上传";
$scope.imgArrs = [];
$scope.$apply();
return;
} else {
var imgFile = personsFile.files[i];
uploadFiles.push(imgFile);
var imgSrc = window.URL.createObjectURL(imgFile);
$scope.imgArrs.push({ "src": imgSrc });
}
}
$scope.$apply();
};
}]);
</script>
