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>

 

posted @ 2018-04-19 18:32  爱喝酸奶的吃货  阅读(639)  评论(0)    收藏  举报