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批量上傳圖片就結束啦!