function imgFile(file) { var reader = new FileReader(); $scope.guid = (new Date()).valueOf(); //通過時間戳記建立一個隨機數,作為鍵名使用 reader.onload = function (ev) { $scope.$apply(function () { $scope.thumb.push(ev.target.result); }); }; reader.readAsDataURL(file); //FileReader的方法,把圖片轉成base64}$scope.img_upload = function (files) { for(var img=0;img<files.length ;img++){ $scope.imgFilesData.push(files[img]); imgFile(files[img]); }};
頁面
<!--照片--><div> <section> <div> <div ng-repeat="item in thumb"> <!-- 採用angular迴圈的方式,對存入thumb的圖片進行展示 --> <label> <img ng-src="{{item}}" class="float-left padding-left-8" width="70px" height="70px"/> </label> </div> <div > <div class="float-left" > <input type="file" id="one-input" accept="image/*" multiple="multiple" file-model="images" style=";z-index: 99999 ;margin-left: -70px;height: 70px;width: 70px;opacity: 0 " onchange="angular.element(this).scope().img_upload(this.files)"/> <div class="width-70 height-70 float-left margin-left-5 line-height-70 background-e5 text-center" > <i class="ion-image font-size-20 color-888"></i> </div> </div> </div> </div> </section></div>