angular批量上传图片并进行校验

最近做一个项目，有一个批量上传图片，并校验是否是图片和上传最大数量的需求。下面分享一下我的想法，欢迎大神探讨。

首先是在html中支持批量上传和接收图片(mac下设置了之后不存在类型校验),下面上html代码，非常简单的一句话:(我上的是优化后的)

<div class="col">
    <div class="col-item w20">
        <label class="asterisk">资质证照</label>
    </div>
    <div class="show-img">
        <img ng-repeat="imgEle in imgArrs" ng-src="{{imgEle.src}}" class="yz inbuy">
    </div>
    <span id="fileName" class="file-type">上传数量:1~5张!<br />支持扩展名：png jpg......</span>
    <div class="upload-file" style="margin-left:200px;height:38px;line-height: 38px">
        上传文件
        <input class="upload-file-img" style="left:200px;height:38px;" type="file" name="file" id="personsFile" multiple="multiple" accept="image/*" onchange="angular.element(this).scope().setImagePreviews()" />
    </div>
</div>

<div class="col error-msg" ng-show="customerData.errorMsg.logo" style="margin-top: 0;">
    <div class="col-item w50" ng-bind="customerData.errorMsg.logo"></div>
</div>

样式的话我就不再赘述了，大家随意设置哈。（angular.element(this).scope()这个可以省略哈）接下来主要是js里面实现setImagePreviews方法，主要是在选择图片后处理传回来的Files,如下:

// 上传图片
$scope.setImagePreviews = function() {
    if (!personsFile.files[0]) {
        return;
    } else if (personsFile.files.length > 5) {
        $scope.customerData.checkInfoMsg = false;
        $scope.customerData.errorMsg.logo = "上传图片数量超出范围!";
        return;
    }
    $scope.customerData.errorMsg.logo = "";
    $scope.imgArrs = [];
    var uploadFiles = [];
    for (var i = 0; i < personsFile.files.length; i++) {
        var imgFile = personsFile.files[i];
        var _name, _fileName;
        _name = imgFile.name;
        _fileName = _name.substring(_name.lastIndexOf(".") + 1).toLowerCase();
        if (_fileName !== "png" && _fileName !== "jpg") {
            $scope.customerData.checkInfoMsg = false;
            $scope.customerData.purchaser.logo = "";
            $scope.customerData.errorMsg.logo = "上传图片格式不正确，请重新上传";
            $scope.imgArrs = [];
            return;
        } else {
            uploadFiles.push(imgFile);
            var imgSrc = window.URL.createObjectURL(imgFile);
            $scope.imgArrs.push({ "src": imgSrc });
        }
    }
};
运行启动后如果有错误，提示如下：

 

选择正确，则提示如下:

 

到此为止，使用angular批量上传图片就结束啦!