angularjs 图片上传 回显

来源:互联网 发布:java工程师是干什么的 编辑:程序博客网 时间:2024/06/02 04:16
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>

原创粉丝点击