angularjs 图片上传 回显

xiaoxiao2021-02-28  92

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 " οnchange="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>
转载请注明原文地址: https://www.6miu.com/read-59015.html

最新回复(0)