angularjs 图片上传 回显
2017-07-11 11:46
309 查看
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>
相关文章推荐
- Struts2+ajax+json异步上传图片回显
- jquery html5 上传图片并且 图片回显
- angularJs中上传图片/文件功能:ng-file-upload
- 图片回显(上传前预览)功能
- jfinal 后台文件上传(结合上一篇(h5 图片回显))
- 一种上传图片立即回显的解决方案
- 浅谈 Html5 带进度条的的文件图片(带本地回显)上传(er)
- angularjs上传图片插件使用
- angularJs中上传图片/文件功能:ng-file-upload
- WPF+MVC+WCF大图片上传回显Demo
- 在angularjs客户端压缩图片文件然后上传
- AngularJS图片上传功能的实现
- angularjs图片上传后不刷新的解决办法
- SpringMVC实现angularjs图片上传
- ueditor1.4.3jsp版成功上传图片后却回显不出来与在线管理显示不出图片的解决方案
- angularjs上传图片预览
- 使用Dropzone上传图片及回显示例
- ZH奶酪:AngularJS/JavaScript上传图片【PC端】
- 通过AngularJS实现图片上传及缩略图展示
- 浅谈 Html5 带进度条的的文件图片(带本地回显)上传